5.0.2 • Published 5 years ago
react-checkbox-group v5.0.2
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-group
or
yarn add react-checkbox-group
Simply 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.
5.0.2
5 years ago
5.0.1
5 years ago
5.0.0
5 years ago
4.0.1
6 years ago
3.3.4
6 years ago
3.3.3
6 years ago
4.0.0
6 years ago
3.3.2
6 years ago
4.0.0-beta
7 years ago
3.3.1
7 years ago
3.3.0
7 years ago
3.2.0
7 years ago
3.1.1
7 years ago
3.1.0
7 years ago
3.0.1
8 years ago
3.0.0
8 years ago
1.0.4
8 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago
0.3.2
8 years ago
0.3.1
9 years ago
0.2.2
9 years ago
0.2.1
9 years ago
0.2.0
9 years ago
0.1.9
9 years ago
0.1.8
9 years ago
0.1.7
9 years ago
0.1.6
9 years ago
0.1.5
10 years ago
0.1.4
10 years ago
0.1.3
10 years ago
0.1.2
10 years ago
0.1.1
10 years ago
0.1.0
10 years ago