docs: useMap demo link + improved docs (#650)

* improve docs: useMap demo link

* improve docs: useMap demo link (remove callback usage added)

* Add remove action to useMap story
This commit is contained in:
Arty 2019-10-06 22:02:45 -07:00 committed by Ward
parent b1fc6a75a6
commit c520797fd5
3 changed files with 16 additions and 7 deletions

View File

@ -132,7 +132,7 @@
- [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. [![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d)
- [`useCounter` and `useNumber`](./docs/useCounter.md) — tracks state of a number. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo)
- [`useList`](./docs/useList.md) — tracks state of an array.
- [`useMap`](./docs/useMap.md) — tracks state of an object.
- [`useMap`](./docs/useMap.md) — tracks state of an object. [![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161)
<br />

View File

@ -2,22 +2,28 @@
React state hook that tracks a value of an object.
## Usage
```jsx
import {useMap} from 'react-use';
const Demo = () => {
const [map, {set, reset}] = useMap({
const [map, {set, remove, reset}] = useMap({
hello: 'there',
});
return (
<div>
<button onClick={() => set(String(Date.now()), new Date().toJSON())}>
Add
</button>
<button onClick={() => reset()}>
Reset
</button>
<button onClick={() => remove('hello')} disabled={!map.hello}>
Remove 'hello'
</button>
<pre>{JSON.stringify(map, null, 2)}</pre>
<button onClick={() => set(String(Date.now()), (new Date()).toJSON())}>Add</button>
<button onClick={() => reset()}>Reset</button>
</div>
);
};

View File

@ -4,15 +4,18 @@ import { useMap } from '..';
import ShowDocs from './util/ShowDocs';
const Demo = () => {
const [map, { set, reset }] = useMap({
const [map, { set, remove, reset }] = useMap({
hello: 'there',
});
return (
<div>
<pre>{JSON.stringify(map, null, 2)}</pre>
<button onClick={() => set(String(Date.now()), new Date().toJSON())}>Add</button>
<button onClick={() => reset()}>Reset</button>
<button onClick={() => remove('hello')} disabled={!map.hello}>
Remove 'hello'
</button>
<pre>{JSON.stringify(map, null, 2)}</pre>
</div>
);
};