diff --git a/README.md b/README.md index c10e2170..b9f72088 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@
Collection of essential React Hooks.
- This is mostly port of libreact to React Hooks. + This is mostly port of libreact to React Hooks.

@@ -46,7 +46,8 @@

- [__Animations__](./docs/Animations.md) - - [`useSpring`](./docs/useSpring.md) — updates number value over time according to spring dynamics. + - [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics. + - [`useTimeout`](./docs/useTimeout.md) — returns true after a timeout.

- [__Side-effects__](./docs/Side-effects.md) diff --git a/docs/useTimeout.md b/docs/useTimeout.md new file mode 100644 index 00000000..a05c268d --- /dev/null +++ b/docs/useTimeout.md @@ -0,0 +1,20 @@ +# `useTimeout` + +Returns `true` after a specified number of milliseconds. + + +## Usage + +```jsx +import {useTimeouta} from 'react-use'; + +const Demo = () => { + const ready = useTimeout(2000); + + return ( +
+ Ready: {ready ? 'Yes' : 'No'} +
+ ); +}; +``` diff --git a/src/__stories__/useTimeout.story.tsx b/src/__stories__/useTimeout.story.tsx new file mode 100644 index 00000000..e6b0c506 --- /dev/null +++ b/src/__stories__/useTimeout.story.tsx @@ -0,0 +1,18 @@ +import {storiesOf} from '@storybook/react'; +import * as React from 'react'; +import {useTimeout} from '..'; + +const Demo = () => { + const ready = useTimeout(2e3); + + return ( +
+ Ready: {ready ? 'Yes' : 'No'} +
+ ); +}; + +storiesOf('useTimeout', module) + .add('Example', () => + + ) diff --git a/src/index.ts b/src/index.ts index c15e733e..5d317a6a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,6 +15,7 @@ import useNetwork from './useNetwork'; import useOrientation from './useOrientation'; import useSize from './useSize'; import useSpring from './useSpring'; +import useTimeout from './useTimeout'; import useTitle from './useTitle'; import useToggle from './useToggle'; import useWindowSize from './useWindowSize'; @@ -37,6 +38,7 @@ export { useOrientation, useSize, useSpring, + useTimeout, useTitle, useToggle, useWindowSize, diff --git a/src/useTimeout.ts b/src/useTimeout.ts new file mode 100644 index 00000000..73a8ec81 --- /dev/null +++ b/src/useTimeout.ts @@ -0,0 +1,19 @@ +import {useState, useEffect} from './react'; + +const useTimeout = (ms: number = 0) => { + const [ready, setReady] = useState(false); + + useEffect(() => { + let timer = setTimeout(() => { + setReady(true); + }, ms); + + return () => { + clearTimeout(timer); + }; + }); + + return ready; +}; + +export default useTimeout;