React-checkbox-group



This is your average checkbox group:

``html



onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="apple"
/>Apple
onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="orange"
/>Orange
onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="watermelon"
/>Watermelon



`

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

`sh
npm install react-checkbox-group
`

or

`sh
yarn add react-checkbox-group
`

Simply require/import it to use it:

`tsx
import CheckboxGroup from 'react-checkbox-group'
`

Example

`tsx
import React, { useState, useEffect } from 'react'
import CheckboxGroup from 'react-checkbox-group'

const Demo = () => {
// Initialize the checked values
const [fruits, setFruits] = useState(['apple', 'watermelon'])

useEffect(() => {
const timer = setTimeout(() => {
setFruits(['apple', 'orange'])
}, 5000)

return () => clearTimeout(timer)
}, [])

return (

{(Checkbox) => (
<>

Apple


Orange


Watermelon


)}

)
}

ReactDOM.render(, document.body)
``

License

MIT.