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