React-helpful-hooks NPM

React Helpful Hooks

A set of helpful react.js hooks

Install

npm

npm install react-helpful-hooks --save

yarn

yarn add react-helpful-hooks

Hooks

useAsyncCallback

This hook is meant to simplify async operations inside components.
In this example:
onClick is the callback function that triggers the async operation.
asyncFunction is the original async function.
deps is the dependency array to update asyncFunction.
isLoading will be true after onClick was executed but before the promise completes.
error is the data from the rejected promise.
response is the data from the resolved promise.
This hook also handle cases where component unmounts before the promise is resolved/rejected
Example
const [onClick, isLoading, error, response] = useAsyncCallback<Error, Response>(asyncFunction, deps);

<button onClick={onClick} disabled={isLoading}

click me {response && response: {response}} {error && error: {error}}

useTimer

This hook is to be used as a timer, but also works as a timeout or interval if combined with a useEffect
In this example:
timer is the time elapsed from initialization or the last reset (starting at 0).
play is a callback to start the timer.
pause is a callback to pause the timer.
reset sets the timer at 0. If the timer is running, it will keep running. If the timer is paused, it will remain paused.
interval is the time interval in milliseconds that will elapse between each tick.
isRunning is a boolean that represent the current timer state. Defaults to true
startsRunning is the initial state for isRunning
Note: the number given back as timer represents the elapsed time plus the spent execution time. This means that an interval of 1000ms will most likely have an elapsed time of more than 1000ms (normally by a few milliseconds)
Example
const { timer, play, pause, reset, isRunning } = useTimer(interval, startsRunning);

useStateHistory

This hook uses the same interface as useState, but adds the possibility to access the change history
In this example:
state is the current state, not different as the one from useState.
setState is the state setter, not different as the one from useState.
history is the list of state values that was set. It starts from the latest one.
'initial value' is the optional initial state value, not different as the one from useState.
limit is the optional history limit. If you set 2, then you will have a max history array of 2 items. When the limit is rached, the oldest value is discarded. Defaults to Infinity.
Example
const [state, setState, history] = useStateHistory<string>('initial state', limit);