Skip to content

Commit

Permalink
Export useIsomorphicLayoutEffect + docs
Browse files Browse the repository at this point in the history
  • Loading branch information
wardoost committed Jul 10, 2019
1 parent e2b8278 commit 192c983
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 4 deletions.
24 changes: 24 additions & 0 deletions docs/useIsomorphicLayoutEffect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# `useIsomorphicLayoutEffect`

`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.

## Usage

```jsx
import {useIsomorphicLayoutEffect} from 'react-use';

const Demo = ({value}) => {
useIsomorphicLayoutEffect(() => {
window.console.log(value)
}, [value]);

return null;
};
```


## Reference

```ts
useIsomorphicLayoutEffect(effect: EffectCallback, deps?: ReadonlyArray<any> | undefined);
```
7 changes: 7 additions & 0 deletions src/__stories__/useIsomorphicLayoutEffect.story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import ShowDocs from './util/ShowDocs';

storiesOf('Lifecycle|useIsomorphicLayoutEffect', module).add('Docs', () => (
<ShowDocs md={require('../../docs/useIsomorphicLayoutEffect.md')} />
));
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import useGetSetState from './useGetSetState';
import useHover from './useHover';
import useHoverDirty from './useHoverDirty';
import useIdle from './useIdle';
import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
import useKey from './useKey';
import useKeyboardJs from './useKeyboardJs';
import useKeyPress from './useKeyPress';
Expand Down Expand Up @@ -101,6 +102,7 @@ export {
useHover,
useHoverDirty,
useIdle,
useIsomorphicLayoutEffect,
useKey,
useKeyboardJs,
useKeyPress,
Expand Down
4 changes: 0 additions & 4 deletions src/useIsomorphicLayoutEffect.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import { useEffect, useLayoutEffect } from 'react';

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

export default useIsomorphicLayoutEffect;

0 comments on commit 192c983

Please sign in to comment.