Naively Programmable Module
    Wondering what’s next for npm?Check out our public roadmap! »

    use-waiter
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.1 • Public • Published

    use-waiter 🤵

    A react hook to wait for an asynchronous order.

    npm license

    Demo

    https://skt-t1-byungi.github.io/use-waiter/

    Install

    npm i use-waiter

    Example

    import {useWait, wait} from 'use-waiter'
     
    function App(){
        const isSending = useWait('SEND_MESSAGE', {delay: 300, duration: 600})
     
        if(isSending){
            return <Loading />
        }
     
        const onClick = () => {
            wait('SEND_MESSAGE', sendMessageAsync('hello'))
        }
     
        return (
            <>
                <Content />
                <button onClick={onClick}>send!</button>
            </>)
    }

    API

    wait(name, order)

    Wait for an asynchronous order. Orders should be promise or function. Returns the order promise.

    // promise order
    const promise = sendMessageAsync('hello')
    wait('SEND_MESSAGE', promise)
     
    // function order
    wait('SEND_MESSAGE', async () => {
        await sendMessageAsync('hello')
    })

    isWaiting(name)

    Returns whether order is waiting or not.

    import {isWaiting, wait} from 'use-waiter'
     
    isWaiting('TASK') // => false
     
    wait('TASK', asyncTask()).then(() => {
        isWaiting('TASK') // => false
    })
     
    isWaiting('TASK') // => true

    useWait(name[, opts])

    A react hook that subscribes to changes in order status.

    options

    delay

    When promise changes to pending, respond as late as the delay time. if promise is completed within the delay time, it does not respond. This prevents flashing when the pending time is short.The default value is 0ms.

    duration

    When the promise is completed before the duration time, respond after the remaining duration time. This will ensure minimum motion time to prevent flashing. The default value is 0ms.

    new Waiter()

    Create an independent waiter instance.

    import {Waiter, isWaiting} from 'use-waiter'
     
    const waiter = new Waiter()
    waiter.wait('TASK', asyncTask())
     
    waiter.isWaiting('TASK') // => true
    isWaiting('TASK') // => false

    useLocalWait([opts])

    A react hook for local use within a component.

    import {useLocalWait} from 'use-waiter'
     
    function App(){
        const [isSending, wait] = useLocalWait({delay: 300, duration: 600})
     
        if(isSending){
            return <Loading />
        }
     
        const onClick = () => {
            wait(sendMessageAsync('hello'))
        }
     
        return (
            <>
                <Content />
                <button onClick={onClick}>send!</button>
            </>)
    }

    options

    Same as useWait options.

    createFixedWait(orderer)

    Create a waiter that performs a fixed single order.

    import {createFixedWait} from 'use-waiter'
     
    const sendMessage = createFixedWait(async (text) => {
        await sendMessageAsync(text)
    })
     
    function App(){
        const isSending = sendMessage.useWait({delay: 300, duration: 600})
     
        if(isSending){
            return <Loading />
        }
     
        const onClick = () => {
            sendMessage('hello')
        }
     
        return (
            <>
                <Content />
                <button onClick={onClick}>send!</button>
            </>)
    }

    useWaitBuffer(isWaiting, value)

    If you use duration, you are still waiting, even though the actual asynchronous request is finished. This is useful if you want to show the results of the request after waiting.

    function App(){
        import {useWait, useWaitBuffer} from 'use-waiter'
     
        const {fetchedData: realData} = useContext(ApiContext)
        const isWaiting = useWait('API_FETCHED_DATA', {duration: 600})
        const displayData = useWaitBuffer(isWaiting, realData)
     
        /* ... */
    }

    License

    MIT

    Install

    npm i use-waiter

    DownloadsWeekly Downloads

    4

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar