- ๐ Supports (Tested on 4.1+) TypeScript type definition.
- ๐ฆ Tiny size. No external dependencies, aside for the
react
;
To use use-watch-status
, you must use [email protected]
or greater which includes hooks.
npm install --save use-watch-status
const [checks, triggers, clear] = useWatchStatus(STATUS_STATES, INITIAL_STATE)
@param events - override default events (MUST BE A CONSTANT, and NOT defined at runtime)
@param initialEvent - initial state
@returns EventChecks - Only one of these checks will be true at any given time
@returns EventTriggers - Can be used to turn a single check to true
@returns Clear - Can be used to clear state
import React from 'react'
import { useWatchStatus } from 'use-watch-status'
// NOTE: Without 'as const' on this array all the typescript typings will break
const ALL_POTENTIAL_STATUS_STATES = ['ready', 'loading', 'complete'] as const;
const Example = () => {
const [checks, triggers, clear] = useWatchStatus(ALL_POTENTIAL_STATUS_STATES, 'ready')
useEffect(() => {
// simulate ready
triggers.onReady();
// simulate loading
setTimeout(() => {
triggers.onLoading();
// simulate loading for 5 seconds, before being marked as complete
setTimeout(() => triggers.onComplete(), 5 * 1000);
}, 2 * 1000);
}, []);
return (
<div>
{checks.isReady && 'Action is ready'}
{checks.isLoading && 'Action is loading...'}
{checks.isComplete && 'Action Complete!'}
</div>
)
}
Create a wrapper around the hook for re-use
const NETWORK_FETCH_STATUS_STATES = ['ready', 'loading', 'error', 'finished', 'timeout'];
const useWatchFetchStatus = () => useWatchStatus(NETWORK_FETCH_STATUS_STATES);
// - Usage -
const App = () => {
const [fetchStatusChecks, fetchStatusTriggers, clear] = useWatchFetchStatus();
useEffect(() => {
if (isNetworkAccessable) { // <--- pretend check before triggering 'ready' status
fetchStatusTriggers.onReady();
}
}, []);
if (fetchStatusChecks.isReady) {
// Do something
}
function resetStatus() {
clear();
}
return (
...Some Code
)
}
Please don't be shy, if you think there are improvements to be made, then submit an issue.
MIT ยฉ ClickyCrispp