Merge pull request #37 from streamich/adopt

Adopt

Author: streamich

README.md

@@ -77,10 +77,12 @@
     <br/>
 - [**State**](./docs/State.md)
   - [`createMemo`](./docs/createMemo.md) &mdash; factory of memoized hooks.
+  - [`useAdopt`](./docs/useAdopt.md) &mdash; extract value from multiple render-prop (or FaCC) components.
   - [`useCallbag`](./docs/useCallbag.md) &mdash; tracks latest value of a callbag.
   - [`useGetSet`](./docs/useGetSet.md) &mdash; returns state getter `get()` instead of raw state.
   - [`useGetSetState`](./docs/useGetSetState.md) &mdash; as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
   - [`useObservable`](./docs/useObservable.md) &mdash; tracks latest value of an `Observable`.
+  - [`useRenderProp`](./docs/useRenderProp.md) &mdash; extracts value from a render-prop or a FaCC.
   - [`useSetState`](./docs/useSetState.md) &mdash; creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0)
   - [`useToggle` and `useBoolean`](./docs/useToggle.md) &mdash; tracks state of a boolean.
   - [`useCounter` and `useNumber`](./docs/useCounter.md) &mdash; tracks state of a number.

docs/useAdopt.md

@@ -0,0 +1,35 @@
+# `useAdopt`
+
+Extracts a values from multiple render-prop or FaCC components.
+This hook is similar to [`useRenderProp`](./useRenderProp.md), but
+it allows to specify a named map of multiple render-prop elements
+from which to extract values.
+
+
+## Usage
+
+```jsx
+import {useAdopt} from 'react-use';
+
+const FaCC = ({children}) => {
+  return children('VALUE-FaCC');
+};
+const RenderProp = ({render}) => {
+  return render('VALUE-RenderProp');
+};
+
+const Demo = () => {
+  const [fragment, result] = useAdopt({
+    facc: <FaCC/>,
+    renderProp: <RenderProp/>,
+  });
+
+  return (
+    <>
+      {fragment}
+      <div>FaCC: {result.facc[0]}</div>
+      <div>Render prop: {result.renderProp[0]}</div>
+    </>
+  );
+};
+```

docs/useRenderProp.md

@@ -0,0 +1,31 @@
+# `useRenderProp`
+
+Extracts a value from render-prop or FaCC component.
+
+
+## Usage
+
+```jsx
+import {useRenderProp} from 'react-use';
+
+const FaCC = ({children}) => {
+  return children('VALUE-FaCC');
+};
+const RenderProp = ({render}) => {
+  return render('VALUE-RenderProp');
+};
+
+const Demo = () => {
+  const [fragment1, [value1]] = useRenderProp(<FaCC />);
+  const [fragment2, [value2]] = useRenderProp(<RenderProp />);
+
+  return (
+    <>
+      {fragment1}
+      {fragment2}
+      <div>FaCC: {value1}</div>
+      <div>Render prop: {value2}</div>
+    </>
+  );
+};
+```

src/__stories__/useAdopt.story.tsx

@@ -0,0 +1,32 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useAdopt} from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const FaCC = ({children}) => {
+  return children('VALUE-FaCC');
+};
+const RenderProp = ({render}) => {
+  return render('VALUE-RenderProp');
+};
+
+const Demo = () => {
+  const [fragment, result] = useAdopt({
+    facc: <FaCC/>,
+    renderProp: <RenderProp/>,
+  });
+
+  return (
+    <>
+      {fragment}
+      <div>FaCC: {result.facc[0]}</div>
+      <div>Render prop: {result.renderProp[0]}</div>
+    </>
+  );
+};
+
+storiesOf('useAdopt', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useAdopt.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/__stories__/useRenderProp.story.tsx

@@ -0,0 +1,31 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useRenderProp} from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const FaCC = ({children}) => {
+  return children('VALUE-FaCC');
+};
+const RenderProp = ({render}) => {
+  return render('VALUE-RenderProp');
+};
+
+const Demo = () => {
+  const [fragment1, [value1]] = useRenderProp(<FaCC />);
+  const [fragment2, [value2]] = useRenderProp(<RenderProp />);
+
+  return (
+    <>
+      {fragment1}
+      {fragment2}
+      <div>FaCC: {value1}</div>
+      <div>Render prop: {value2}</div>
+    </>
+  );
+};
+
+storiesOf('useRenderProp', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useRenderProp.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/index.ts

@@ -1,4 +1,5 @@
 import createMemo from './createMemo';
+import useAdopt from './useAdopt';
 import useAsync from './useAsync';
 import useAudio from './useAudio';
 import useBattery from './useBattery';
@@ -28,6 +29,7 @@ import useObservable from './useObservable';
 import useOrientation from './useOrientation';
 import useOutsideClick from './useOutsideClick';
 import useRaf from './useRaf';
+import useRenderProp from './useRenderProp';
 import useSetState from './useSetState';
 import useSize from './useSize';
 import useSpeech from './useSpeech';
@@ -43,6 +45,7 @@ import useWindowSize from './useWindowSize';
 
 export {
   createMemo,
+  useAdopt,
   useAsync,
   useAudio,
   useBattery,
@@ -72,6 +75,7 @@ export {
   useOrientation,
   useOutsideClick,
   useRaf,
+  useRenderProp,
   useSetState,
   useSize,
   useSpeech,

src/useAdopt.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import useRenderProp from './useRenderProp';
+
+const useAdopt = <T extends {[key: string]: any[]}>(map: {[key in keyof T]: React.ReactElement<any>}): [React.ReactElement<any>, T] => {
+  const keys = Object.keys(map);
+  const fragments: React.ReactElement<any>[] = [];
+  const result: T = {} as T;
+
+  keys.sort();
+  for (const key of keys) {
+    const [fragment, value] = useRenderProp(map[key]);
+    fragments.push(React.cloneElement(fragment, {key}));
+    result[key] = value;
+  }
+
+  return [React.createElement(React.Fragment, null, ...fragments), result];
+};
+
+export default useAdopt;

src/useRenderProp.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {useState, useCallback} from './react';
+import createMemo from './createMemo';
+
+const useRenderProp = (element: React.ReactElement<any>): [React.ReactElement<any>, any[]] => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!React.isValidElement(element)) {
+      throw new TypeError(
+        'useRenderProp element to be a valid React element ' +
+        'such as <MyRenderProp />.'
+      );
+    }
+  }
+
+  const [state, setState] = useState<any[]>([]);
+  const useSetState = createMemo((...args) => setState(args));
+  const render = useCallback((...args) => {
+    useSetState(...args);
+    return null;
+  }, []);
+  const cloned = React.cloneElement(element, {
+    render,
+    children: render,
+  });
+
+  return [cloned, state];
+};
+
+export default useRenderProp;