react-checkbox-group
https://github.com/ziad-saab/react-checkbox-group
A fork fromLahzenegar
Modified and customized forThis is your average checkbox group:
Apple Orange Watermelon
Repetitive, hard to manipulate and easily desynchronized.
Lift up name
and onChange
, and give the group an initial checked values array:
; <CheckboxGroup name="fruits" value='kiwi' 'pineapple' onChange=thisfruitsChanged> <Checkbox value="kiwi">Kiwi</Checkbox> <Checkbox value="pineapple">Pineapple</Checkbox> <Checkbox value="watermelon">Watermelon</Checkbox></CheckboxGroup>
Listen for changes, get the new value as intuitively as possible:
<CheckboxGroup name="fruit" value='apple''watermelon' onChange=thishandleChange>...</CheckboxGroup>
and further
{ // ['apple']}
That's it for the API! See below for a complete example.
Install
npm install react-checkbox-group
Simply require/import it to use it:
var Check = ;var Checkbox = CheckCheckbox;var CheckboxGroup = CheckCheckboxGroup; // or ES6;
Example
Component { superprops; thisstate = fruits: 'apple''watermelon' ; } { // Add orange and remove watermelon after 5 seconds ; } { // the checkboxes can be arbitrarily deep. They will always be fetched and // attached the `name` attribute correctly. `value` is optional return <CheckboxGroup name="fruits" value=thisstatefruits onChange=thisfruitsChanged> <Checkbox value="apple"> Apple</Checkbox> <Checkbox value="orange"> Orange</Checkbox> <Checkbox value="watermelon"> Watermelon</Checkbox> </CheckboxGroup> ; } { this; } ; ReactDOM;
License
MIT.