React-checkbox-group
https://github.com/chenglou/react-radio-group
Heavily inspired fromThis 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"/> <Checkbox value="pineapple"/> <Checkbox value="watermelon"/></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
bower install react-checkbox-group
or
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> <label><Checkbox value="apple"/> Apple</label> <label><Checkbox value="orange"/> Orange</label> <label><Checkbox value="watermelon"/> Watermelon</label> </CheckboxGroup> ; } { this; } ; ReactDOM;
License
MIT.