https://github.com/pacocoursey/use-delayed-render
react hook for delaying the render and unmount of a component
https://github.com/pacocoursey/use-delayed-render
hook react react-hooks
Last synced: about 1 year ago
JSON representation
react hook for delaying the render and unmount of a component
- Host: GitHub
- URL: https://github.com/pacocoursey/use-delayed-render
- Owner: pacocoursey
- Created: 2020-05-13T05:39:06.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:43:32.000Z (over 3 years ago)
- Last Synced: 2025-03-30T20:11:19.221Z (about 1 year ago)
- Topics: hook, react, react-hooks
- Language: TypeScript
- Homepage:
- Size: 462 KB
- Stars: 165
- Watchers: 3
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useDelayedRender 
useDelayedRender is a react hook for delaying the render and unmount of a component. This is commonly used to animate UI on unmount.
## Installation
```
$ yarn add use-delayed-render
```
## Usage
Function signature:
```ts
const { mounted: boolean, rendered: boolean } = useDelayedRender(
active: boolean,
options?: {
enterDelay: number,
exitDelay: number,
onUnmount: () => void
}
)
```
Options:
- `active`: Whether your component is in an active state
- `enterDelay`: After mounting, the delay before `rendered` becomes true
- `exitDelay`: After `rendered` becomes false, the delay before unmounting
- `onUnmount`: A callback triggered after unmounting
Return values:
- `mounted`: Whether your component should be mounted in the DOM
- `rendered`: Whether your component should be visible
## Example
Render a modal, but delay the unmount so that our 2 second CSS transition completes before the modal is removed from the DOM.
```js
const Modal = ({ active }) => {
const { mounted, rendered } = useDelayedRender(active, {
exitDelay: 2000,
})
if (!mounted) return null
return (
{/* ... */}
)
}
```
This allows you to use simple CSS transitions to animate the mounting/unmounting of your component.
```css
.modal {
opacity: 0;
transition: opacity 2s ease;
}
.modal.visible {
opacity: 1;
}
```
## Why?
- Usually you would use [`react-transition-group`](https://github.com/reactjs/react-transition-group) to solve this, but the 2.37MB install size is a bit overkill, compared to this package at 491B gzipped.
```jsx
```
- Hooks solve the problem without needing a render function or HOC.