diff --git a/README.md b/README.md index 472f2b70..eb9a0472 100644 --- a/README.md +++ b/README.md @@ -81,12 +81,10 @@
- [**State**](./docs/State.md) - [`createMemo`](./docs/createMemo.md) — factory of memoized hooks. - - [`useAdopt`](./docs/useAdopt.md) — extract value from multiple render-prop (or FaCC) components. - [`useCallbag`](./docs/useCallbag.md) — tracks latest value of a callbag. - [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state. - [`useGetSetState`](./docs/useGetSetState.md) — as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby. - [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`. - - [`useRenderProp`](./docs/useRenderProp.md) — extracts value from a render-prop or a FaCC. - [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0) - [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. - [`useCounter` and `useNumber`](./docs/useCounter.md) — tracks state of a number. diff --git a/docs/useAdopt.md b/docs/useAdopt.md deleted file mode 100644 index fb95095a..00000000 --- a/docs/useAdopt.md +++ /dev/null @@ -1,37 +0,0 @@ -> __WARNING:__ Don't use this, works only for functional components. - -# `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: , - renderProp: , - }); - - return ( - <> - {fragment} -
FaCC: {result.facc[0]}
-
Render prop: {result.renderProp[0]}
- - ); -}; -``` diff --git a/docs/useRenderProp.md b/docs/useRenderProp.md deleted file mode 100644 index 1d943ccb..00000000 --- a/docs/useRenderProp.md +++ /dev/null @@ -1,33 +0,0 @@ -> __WARNING:__ Don't use this, works only for functional components. - -# `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(); - const [fragment2, [value2]] = useRenderProp(); - - return ( - <> - {fragment1} - {fragment2} -
FaCC: {value1}
-
Render prop: {value2}
- - ); -}; -``` diff --git a/src/__stories__/useAdopt.story.tsx b/src/__stories__/useAdopt.story.tsx deleted file mode 100644 index 629cb220..00000000 --- a/src/__stories__/useAdopt.story.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import {storiesOf} from '@storybook/react'; -import * as React from 'react'; -import {useAdopt} from '..'; -import {useState} from 'react'; -import ShowDocs from '../util/ShowDocs'; -import {Spring} from 'react-spring'; - -const FaCC = ({children}) => { - return children('VALUE-FaCC'); -}; -const RenderProp = ({render}) => { - return render('VALUE-RenderProp'); -}; - -let values = []; -let cnt = 0; -const Spring2 = (props) => { - if (cnt < 100) { - props.children(...values); - cnt++; - } - return {(...res) => { - values = res as any; - return null; - }} -}; - -let cnt2 = 0; - -const Spring3 = (props) => { - const [state, set] = useState([]); - - return ( - {(...data) => { - setTimeout(() => { - set(data); - props.children(...data); - }, 1); - return null; - }} - ); -}; - -const Demo = () => { - const [fragment, result] = useAdopt({ - facc: , - renderProp: , - }); - - return ( - <> - {fragment} -
FaCC: {result.facc[0]}
-
Render prop: {result.renderProp[0]}
- - ); -}; - -const AnimationSpring = () => { - const style = { - width: 200, - height: 200, - borderRadius: '100px', - left: 50, - position: 'fixed', - background: 'red', - }; - - return ( - {(data) => -
- } - ); -}; - -const Animation = () => { - const [fragments, res] = useAdopt({animation: }); - const style = { - width: 200, - height: 200, - borderRadius: '100px', - left: 50, - position: 'fixed', - background: 'red', - }; - - return ( - <> - {fragments} -
- - ); -}; - -storiesOf('State/useAdopt', module) - .add('Docs', () => ) - .add('Demo', () => - - ) - .add('AnimationSpring', () => - - ) - .add('Animation', () => - - ) diff --git a/src/__stories__/useAsync.story.tsx b/src/__stories__/useAsync.story.tsx index b517ad5f..0c3fc6ae 100644 --- a/src/__stories__/useAsync.story.tsx +++ b/src/__stories__/useAsync.story.tsx @@ -3,14 +3,14 @@ import {storiesOf} from '@storybook/react'; import {useAsync} from '..'; import ShowDocs from '../util/ShowDocs'; -const fn = () => new Promise((resolve) => { +const fn = () => new Promise((resolve) => { setTimeout(() => { resolve('RESOLVED'); }, 1000); }); const Demo = () => { - const {loading, value} = useAsync(fn); + const {loading, value} = useAsync(fn); return (
diff --git a/src/__stories__/useRenderProp.story.tsx b/src/__stories__/useRenderProp.story.tsx deleted file mode 100644 index fd566be7..00000000 --- a/src/__stories__/useRenderProp.story.tsx +++ /dev/null @@ -1,31 +0,0 @@ -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(); - const [fragment2, [value2]] = useRenderProp(); - - return ( - <> - {fragment1} - {fragment2} -
FaCC: {value1}
-
Render prop: {value2}
- - ); -}; - -storiesOf('State/useRenderProp', module) - .add('Docs', () => ) - .add('Demo', () => - - ) diff --git a/src/index.ts b/src/index.ts index ae6ecc03..781f36da 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,4 @@ import createMemo from './createMemo'; -import useAdopt from './useAdopt'; import useAsync from './useAsync'; import useAudio from './useAudio'; import useBattery from './useBattery'; @@ -31,7 +30,6 @@ import useOrientation from './useOrientation'; import useOutsideClick from './useOutsideClick'; import useRaf from './useRaf'; import useRefMounted from './useRefMounted'; -import useRenderProp from './useRenderProp'; import useSessionStorage from './useSessionStorage'; import useSetState from './useSetState'; import useSize from './useSize'; @@ -49,7 +47,6 @@ import useWait from './useWait'; export { createMemo, - useAdopt, useAsync, useAudio, useBattery, @@ -81,7 +78,6 @@ export { useOutsideClick, useRaf, useRefMounted, - useRenderProp, useSessionStorage, useSetState, useSize, diff --git a/src/useAdopt.ts b/src/useAdopt.ts deleted file mode 100644 index 175c8c5c..00000000 --- a/src/useAdopt.ts +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import useRenderProp from './useRenderProp'; - -const useAdopt = (map: {[key in keyof T]: React.ReactElement}): [React.ReactElement, T] => { - const keys = Object.keys(map); - const fragments: React.ReactElement[] = []; - 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; diff --git a/src/useAsync.ts b/src/useAsync.ts index aa0ecfe1..760bceca 100644 --- a/src/useAsync.ts +++ b/src/useAsync.ts @@ -3,10 +3,13 @@ import {useState, useEffect, useCallback} from 'react'; export type AsyncState = | { loading: true; + error?: undefined; + value?: undefined; } | { loading: false; error: Error; + value?: undefined; } | { loading: false; diff --git a/src/useRenderProp.ts b/src/useRenderProp.ts deleted file mode 100644 index e16c1168..00000000 --- a/src/useRenderProp.ts +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import createMemo from './createMemo'; - -const {useState, useCallback} = React; - -const useRenderProp = (element: React.ReactElement): [React.ReactElement, any[]] => { - if (process.env.NODE_ENV !== 'production') { - if (!React.isValidElement(element)) { - throw new TypeError( - 'useRenderProp element to be a valid React element ' + - 'such as .' - ); - } - } - - const [state, setState] = useState([]); - 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; diff --git a/yarn.lock b/yarn.lock index bdab4b18..0096ce12 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9556,10 +9556,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^3.1.3: - version "3.1.3" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.3.tgz#01b70247a6d3c2467f70c45795ef5ea18ce191d5" - integrity sha512-+81MUSyX+BaSo+u2RbozuQk/UWx6hfG0a5gHu4ANEM4sU96XbuIyAB+rWBW1u70c6a5QuZfuYICn3s2UjuHUpA== +typescript@^3.2.2: + version "3.2.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5" + integrity sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg== ua-parser-js@^0.7.18: version "0.7.19"