React-checkbox-group
This is your average checkbox group:
<form>
<input
onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="apple"
/>Apple
<input
onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="orange"
/>Orange
<input
onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="watermelon"
/>Watermelon
</form>Repetitive, hard to manipulate and easily desynchronized.
Lift up name and onChange, and give the group an initial checked values array.
See below for a complete example
Install
npm install react-checkbox-groupor
yarn add react-checkbox-groupSimply require/import it to use it:
import CheckboxGroup from 'react-checkbox-group'Example
import React, { useState, useEffect } from 'react'
import CheckboxGroup from 'react-checkbox-group'
const Demo = () => {
// Initialize the checked values
const [fruits, setFruits] = useState<string[]>(['apple', 'watermelon'])
useEffect(() => {
const timer = setTimeout(() => {
setFruits(['apple', 'orange'])
}, 5000)
return () => clearTimeout(timer)
}, [])
return (
<CheckboxGroup name="fruits" value={fruits} onChange={setFruits}>
{(Checkbox) => (
<>
<label>
<Checkbox value="apple" /> Apple
</label>
<label>
<Checkbox value="orange" /> Orange
</label>
<label>
<Checkbox value="watermelon" /> Watermelon
</label>
</>
)}
</CheckboxGroup>
)
}
ReactDOM.render(<Demo />, document.body)License
MIT.