Skip to content

Commit

Permalink
Update useSet docs
Browse files Browse the repository at this point in the history
  • Loading branch information
suisous committed Jan 5, 2024
1 parent 5aa8436 commit d4e671d
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 2 deletions.
8 changes: 7 additions & 1 deletion docs/useSet.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,22 @@ React state hook that tracks a [Set](https://developer.mozilla.org/en-US/docs/We

## Usage

What is the difference between the "clear()" method and the "reset()" method?

The "reset()" method returns the "Set" to the initial value passed during "useSet
The "clear()" method completely empties the "Set".

```jsx
import {useSet} from 'react-use';

const Demo = () => {
const [set, { add, has, remove, toggle, reset }] = useSet(new Set(['hello']));
const [set, { add, has, remove, toggle, reset, clear }] = useSet(new Set(['hello']));

return (
<div>
<button onClick={() => add(String(Date.now()))}>Add</button>
<button onClick={() => reset()}>Reset</button>
<button onClick={() => clear()}>Clear</button>
<button onClick={() => remove('hello')} disabled={!has('hello')}>
Remove 'hello'
</button>
Expand Down
3 changes: 2 additions & 1 deletion stories/useSet.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import { useSet } from '../src';
import ShowDocs from './util/ShowDocs';

const Demo = () => {
const [set, { add, has, remove, reset, toggle }] = useSet(new Set(['hello']));
const [set, { add, has, remove, reset, clear, toggle }] = useSet(new Set(['hello']));

return (
<div>
<button onClick={() => add(String(Date.now()))}>Add</button>
<button onClick={() => reset()}>Reset</button>
<button onClick={() => clear()}>Clear</button>
<button onClick={() => remove('hello')} disabled={!has('hello')}>
Remove 'hello'
</button>
Expand Down

0 comments on commit d4e671d

Please sign in to comment.