Skip to content

Commit

Permalink
feat: 🎸 add useUpdate hook
Browse files Browse the repository at this point in the history
  • Loading branch information
streamich committed Oct 29, 2018
1 parent bfc30b9 commit c00f308
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
<br/>
<br/>
- [**Side-effects**](./docs/Side-effects.md)
Expand Down
21 changes: 21 additions & 0 deletions docs/useUpdate.md
Original file line number Diff line number Diff line change
@@ -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 (
<>
<div>Time: {Date.now()}</div>
<button onClick={update}>Update</button>
</>
);
};
```
21 changes: 21 additions & 0 deletions src/__stories__/useUpdate.story.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<>
<div>Time: {Date.now()}</div>
<button onClick={update}>Update</button>
</>
);
};

storiesOf('useUpdate', module)
.add('Docs', () => <ShowDocs md={require('../../docs/useUpdate.md')} />)
.add('Demo', () =>
<Demo/>
)

2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -67,5 +68,6 @@ export {
useToggle,
useTween,
useUnmount,
useUpdate,
useWindowSize,
};
5 changes: 5 additions & 0 deletions src/useUpdate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import {useState} from './react';

const useUpdate = () => useState(0)[1] as (() => void);

export default useUpdate;

0 comments on commit c00f308

Please sign in to comment.