You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
625 B
27 lines
625 B
3 years ago
|
# use-isomorphic-layout-effect
|
||
|
|
|
||
|
|
A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
```sh
|
||
|
|
$ npm i use-isomorphic-layout-effect
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
You only need to switch `useLayoutEffect` with `useIsomorphicLayoutEffect`
|
||
|
|
|
||
|
|
```diff
|
||
|
|
+ import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
|
||
|
|
- import { useLayoutEffect } from 'react';
|
||
|
|
|
||
|
|
|
||
|
|
const YourComponent = () => {
|
||
|
|
+ useIsomorphicLayoutEffect(() => {
|
||
|
|
- useLayoutEffect(() => {
|
||
|
|
// your implementation
|
||
|
|
}, []);
|
||
|
|
};
|
||
|
|
```
|