use-deferred-state
v1.0.2
Published
A React hook for deferring state change. That's essential when your UI needs to wait for disappearing animation is complete to unmount component.
Downloads
225
Maintainers
Readme
useDeferredState
A React hook for deferring state change. That's essential when your UI needs to wait for disappearing animation is complete to unmount component.
Motivation
The problem of waiting a disappearing animation in React is common and usually being skipped as non-trivial. The goal of the project is to make an easy solution of the problem possible in declarative React way.
Installation
yarn add use-deferred-state
or, using npm
npm install use-deferred-state
Usage
useDeferredState<BaseState>(baseState: BaseState, instantValues: BaseState[] = [], defferFor = 500): BaseState
The hook takes a baseState
and returns it as is but all baseState
changes are deferred for defferFor
ms.
You can also pass an instantValues
– array of possible base state values. When the provided base is equal (by ===
operator) to one of instant values, the returned value is changed immediately.
In example with modal window, displayed in section below, you need to pass true
as one of instant values, that's creates the following state flows: [show modal -> mount modal], [hide modal -> wait for 500ms -> unmount modal]
Minimal Example
import useDeferredState from 'use-deferred-state';
export const MyReactComponennts = () => {
const [showModal, setShowModal] = React.useState(false);
const renderModal = useDeferredState(showModal, [true], 500);
...
};
Full example
import React from 'react';
import { useDeferredState } from 'use-deferred-state';
export const ExampleApp = () => {
const [showModal, setShowModal] = React.useState(false);
const renderModal = useDeferredState(showModal, [true], 500);
return (
<div>
<button className="toggleButton" onClick={() => setShowModal((prevState) => !prevState)}>
{showModal ? 'hide' : 'show'}
</button>
<p>Modal rendered: {String(renderModal)}</p>
{renderModal && (
<div className={showModal ? 'modal visible' : 'modal'}>
<h2>Hello world</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</div>
)}
</div>
);
};
Licence
MIT