diff --git a/README.md b/README.md index 4647b9cdf3..7019a6a1ee 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ - [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics. - [`useTimeout`](./docs/useTimeout.md) — returns true after a timeout. - [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl) + - [`useUpdate`](./docs/useUpdate.md) — returns a callback, which re-renders component when called.

- [**Side-effects**](./docs/Side-effects.md) diff --git a/docs/useUpdate.md b/docs/useUpdate.md new file mode 100644 index 0000000000..9f9549efe1 --- /dev/null +++ b/docs/useUpdate.md @@ -0,0 +1,21 @@ +# `useUpdate` + +React utility hook that returns a function that forces component +to re-render when called. + + +## Usage + +```jsx +import {useUpdate} from 'react-use'; + +const Demo = () => { + const update = useUpdate(); + return ( + <> +
Time: {Date.now()}
+ + + ); +}; +``` diff --git a/src/__stories__/useUpdate.story.tsx b/src/__stories__/useUpdate.story.tsx new file mode 100644 index 0000000000..b445f3c261 --- /dev/null +++ b/src/__stories__/useUpdate.story.tsx @@ -0,0 +1,21 @@ +import {storiesOf} from '@storybook/react'; +import * as React from 'react'; +import {useUpdate} from '..'; +import ShowDocs from '../util/ShowDocs'; + +const Demo = () => { + const update = useUpdate(); + return ( + <> +
Time: {Date.now()}
+ + + ); +}; + +storiesOf('useUpdate', module) + .add('Docs', () => ) + .add('Demo', () => + + ) + diff --git a/src/index.ts b/src/index.ts index 8c2e1dbbb0..974acbcb25 100644 --- a/src/index.ts +++ b/src/index.ts @@ -31,6 +31,7 @@ import useTitle from './useTitle'; import useToggle from './useToggle'; import useTween from './useTween'; import useUnmount from './useUnmount'; +import useUpdate from './useUpdate'; import useWindowSize from './useWindowSize'; export { @@ -67,5 +68,6 @@ export { useToggle, useTween, useUnmount, + useUpdate, useWindowSize, }; diff --git a/src/useUpdate.ts b/src/useUpdate.ts new file mode 100644 index 0000000000..cb1948cb7b --- /dev/null +++ b/src/useUpdate.ts @@ -0,0 +1,5 @@ +import {useState} from './react'; + +const useUpdate = () => useState(0)[1] as (() => void); + +export default useUpdate;