Use Set-like API with React hook
npm install react-use-setreact-use-setUse Set-like API with React hook.
!npm
!CI Status


Install react-use-set npm package
npm i react-use-set
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
- togglesync
- toArray
-
Learn more in API section.
> 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]
`
> 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]
`
Check whether a value exists in Set.
`js
const set = useSet([1, 2, 3])
set.has(1) // true
set.has(4) // false
`
> 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) => (
))
`
> 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
`
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) => (
))}
> 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]
``
MIT © Doma