mirror of
https://github.com/streamich/react-use.git
synced 2025-12-08 18:02:14 +00:00
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:
parent
b1fc6a75a6
commit
c520797fd5
@ -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 />
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user