react-use-set

Use Set-like API with React hook.

!npm
!CI Status

Instsall

Install react-use-set npm package

npm i react-use-set

Usage

Get a Set-like object from useSet() hook.ß

``js
import { useSet } from "react-use-set"

const set = useSet()
`

It's got some Set methods and properties like

- add (enhanced)
- delete (enhanced)
- clear
- size

Along with additional utils like

- toggle
- sync
- toArray

Learn more in API section.

API

$3

> Calling this method triggers a re-render.

Add values to the Set. Multiple values are supported.

`js
const set = useSet([1, 2, 3])

set.add(4) // Set [1, 2, 3, 4]
set.add(5, 6) // Set [1, 2, 3, 4, 5, 6]
`

$3

> Calling this method triggers a re-render.

Remove values from the Set. Multiple values are supported.

`js
const set = useSet([1, 2, 3])

set.delete(1, 2) // Set [3]
`

$3

Check whether a value exists in Set.

`js
const set = useSet([1, 2, 3])

set.has(1) // true
set.has(4) // false
`

$3

> Calling this method triggers a re-render.

If value exists in the Set, remove it, otherwise add it.

`js
const set = useSet([1, 2, 3])

set.toggle(2) // Set [1, 3]
set.toggle(4) // Set [1, 3, 4]
`

This is useful when you want to store selected options on a list.

`jsx
const selectedValues = useSet()

options.map((option) => (
selectedValues.toggle(option.value)} />
))
`

$3

> Calling this method triggers a re-render.

Remove all values from the Set.

`js
const set = useSet([1, 2, 3])

set.clear() // Set []
`

#### set.size

Return the number of values in the Set.

`js
const set = useSet([1, 2, 3])

set.size // 3
`

$3

Return the values in the Set as an array.

`js
const set = useSet([1, 2, 3])

set.toArray() // [1, 2, 3]
`

This is useful when you want to display a list of selected options.

`jsx


Selected options ({selectedValues.size})}):
{selectedValues.toArray().map((value) => (

1. {value}

))}


`

$3

> Calling this method triggers a re-render.

Reset the Set with the given values.

`js
const set = useSet([1, 2, 3])

set.sync([4, 5, 6]) // Set [4, 5, 6]
``

License

MIT © Doma