feat: expose useIsomorphicLayoutEffect + docs (#451)

Export useIsomorphicLayoutEffect + docs

README.md

@@ -110,6 +110,7 @@
   - [`useMount`](./docs/useMount.md) — calls `mount` callbacks.
   - [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks.
   - [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates.
+  - [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — `useLayoutEffect` that does not show warning when server-side rendering.
   - [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md) — run an `effect` depending on deep comparison of its dependencies
     <br/>
     <br/>

docs/useIsomorphicLayoutEffect.md

@@ -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);
+```

src/__stories__/useIsomorphicLayoutEffect.story.tsx

@@ -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')} />
+));

src/index.ts

@@ -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';
@@ -102,6 +103,7 @@ export {
   useHover,
   useHoverDirty,
   useIdle,
+  useIsomorphicLayoutEffect,
   useKey,
   useKeyboardJs,
   useKeyPress,

src/useIsomorphicLayoutEffect.ts

@@ -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;