paulosabayomi/custup-react

CustUp React JS version, written in TypeScript

CustUp React Library

The React JS version of CustUp, written in TypeScript

Installation

npm i custup @custup/react

Usage

Import it into your component like so

// ...
import CustUp from "@custup/react"
// ...

Then import the all.min.css in your index.js or index.tsx file

// ...
import "custup/src/all.min.css";
// ...

Then add CustUp component to where you want CustUp to be created

// ExampleComponent.jsx

const ExampleComponent = React.memo((props) => {
    return (
        <div>
            <CustUp 
                id="first-example-instance" 
            />
        </div>
    )
})

Or if you're using TypeScript

// ExampleComponent.tsx

const ExampleComponent = React.memo((props: any) => {
    return (
        <div>
            <CustUp 
                id="first-example-instance" 
            />
        </div>
    )
})

To use ref with CustUp, let's use the TypeScript ExampleComponent.tsx component

// ExampleComponent.tsx

// ...
import { TCustUp } from "@custup/react";

const ExampleComponent = React.memo((props: any) => {
    const ref1 = React.useRef<TCustUp | undefined>()

    const exampleCustUpSubmit = React.useCallback(() => {
        ref1.current?.upload();
    }, [ref1.current])

    return (
        <div>
            <CustUp 
                ref={ref1}
                id="first-example-instance" 
            />

            <button onClick={exampleCustUpSubmit}>Upload</button>
        </div>
    )
})

And you can also have multiple CustUp components in the same component, only make sure the id props are not the same

// ExampleComponent.tsx

// ...
import { TCustUp } from "@custup/react";

const ExampleComponent = React.memo((props: any) => {
    const ref1 = React.useRef<TCustUp | undefined>()
    const ref2 = React.useRef<TCustUp | undefined>()
    const ref3 = React.useRef<TCustUp | undefined>()

    const exampleCustUpSubmit = React.useCallback(() => {
        ref1.current?.upload();
    }, [ref1.current])

    return (
        <div>
            <CustUp 
                ref={ref1}
                id="first-example-instance" 
            />
            <CustUp 
                ref={ref2}
                id="second-example-instance" 
            />
            <CustUp 
                ref={ref3}
                id="third-example-instance" 
            />
        </div>
    )
})

You can use ref to subscribe to CustUp events

// ExampleComponent.tsx

// ...
import { TCustUp } from "@custup/react";

const ExampleComponent = React.memo((props: any) => {
    const ref1 = React.useRef<TCustUp | undefined>()

    React.useLayoutEffect(() => {

        ref1.current?.on("file.afterAdded", (e) => {
            console.log("file was added", e)
        })

    }, [ref1.current])


    return (
        <div>
            <CustUp 
                ref={ref1}
                id="first-example-instance" 
            />
        </div>
    )
})

All CustUp options can be passed as props to the CustUp component, all CustUp props can be see here.

Visit the Documentation website to see the complete CustUp documentation and other cool things you can do with CustUp.

CustUp main github repository.

License

MIT License