Skip to content

Commit 8dcbbf1

Browse files
authored
feat: expose useIsomorphicLayoutEffect + docs (#451)
Export useIsomorphicLayoutEffect + docs
2 parents 334a5a5 + 4654efc commit 8dcbbf1

File tree

5 files changed

+34
-4
lines changed

5 files changed

+34
-4
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
- [`useMount`](./docs/useMount.md) — calls `mount` callbacks.
111111
- [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks.
112112
- [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates.
113+
- [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — `useLayoutEffect` that does not show warning when server-side rendering.
113114
- [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md) — run an `effect` depending on deep comparison of its dependencies
114115
<br/>
115116
<br/>

docs/useIsomorphicLayoutEffect.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# `useIsomorphicLayoutEffect`
2+
3+
`useLayoutEffect` that does not show warning when server-side rendering, see [Alex Reardon's article](https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a) for more info.
4+
5+
## Usage
6+
7+
```jsx
8+
import {useIsomorphicLayoutEffect} from 'react-use';
9+
10+
const Demo = ({value}) => {
11+
useIsomorphicLayoutEffect(() => {
12+
window.console.log(value)
13+
}, [value]);
14+
15+
return null;
16+
};
17+
```
18+
19+
20+
## Reference
21+
22+
```ts
23+
useIsomorphicLayoutEffect(effect: EffectCallback, deps?: ReadonlyArray<any> | undefined);
24+
```
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { storiesOf } from '@storybook/react';
2+
import * as React from 'react';
3+
import ShowDocs from './util/ShowDocs';
4+
5+
storiesOf('Lifecycle|useIsomorphicLayoutEffect', module).add('Docs', () => (
6+
<ShowDocs md={require('../../docs/useIsomorphicLayoutEffect.md')} />
7+
));

src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import useGetSetState from './useGetSetState';
2525
import useHover from './useHover';
2626
import useHoverDirty from './useHoverDirty';
2727
import useIdle from './useIdle';
28+
import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
2829
import useKey from './useKey';
2930
import useKeyboardJs from './useKeyboardJs';
3031
import useKeyPress from './useKeyPress';
@@ -102,6 +103,7 @@ export {
102103
useHover,
103104
useHoverDirty,
104105
useIdle,
106+
useIsomorphicLayoutEffect,
105107
useKey,
106108
useKeyboardJs,
107109
useKeyPress,

src/useIsomorphicLayoutEffect.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import { useEffect, useLayoutEffect } from 'react';
22

3-
/**
4-
* `useLayoutEffect` that does not show warning on server.
5-
* See: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
6-
*/
73
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
84

95
export default useIsomorphicLayoutEffect;

0 commit comments

Comments
 (0)