use-waiter 🤵
A react hook to wait for an asynchronous order.
Demo
https://skt-t1-byungi.github.io/use-waiter/
Install
npm i use-waiter
Example
import useWait wait from 'use-waiter' { const isSending = ifisSending return <Loading /> const onClick = return <> <Content /> <button =>send!</button> </>}
API
wait(name, order)
Wait for an asynchronous order. Orders should be promise or function. Returns the order promise.
// promise orderconst promise = // function order
isWaiting(name)
Returns whether order is waiting or not.
// => false // => 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 0
ms.
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 0
ms.
new Waiter()
Create an independent waiter instance.
const waiter = waiter waiter // => true // => false
useLocalWait([opts])
A react hook for local use within a component.
import useLocalWait from 'use-waiter' { const isSending wait = ifisSending return <Loading /> const onClick = return <> <Content /> <button =>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 = { const isSending = sendMessage ifisSending return <Loading /> const onClick = return <> <Content /> <button =>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.
{ const fetchedData: realData = const isWaiting = const displayData = /* ... */}
License
MIT