React-checkbox-group
Heavily inspired from https://github.com/chenglou/react-radio-group
This is your average checkbox group:
<form><inputtype="checkbox" name="fruit" value="apple" />Apple <inputtype="checkbox" name="fruit" value="orange" />Orange <inputtype="checkbox" name="fruit" value="watermelon" />Watermelon </form>Repetitive, hard to manipulate and easily desynchronized. Lift up name, give the group an initial checked values array, and optionally remove the form tag:
<CheckboxGroupname="fruit" value={['apple','watermelon']}><inputtype="checkbox" value="apple" />Apple <inputtype="checkbox" value="orange" />Orange <inputtype="checkbox" value="watermelon" />Watermelon </CheckboxGroup>Listen for changes, get the new value as intuitively as possible:
<CheckboxGroupname="fruit" value={['apple','watermelon']} ref="fruitsGroup" onChange={this.handleChange}> // further... this.refs.fruitsGroup.getCheckedValues(); // => whatever's currently checkedThat's it for the API! See below for a complete example.
bower install react-checkbox-group or npm install react-checkbox-groupSimply require it to use it:
varCheckboxGroup=require('react-checkbox-group');/** * @jsx React.DOM */ var Demo = React.createClass({getInitialState: function(){return{value: ['apple','watermelon']}}, componentDidMount: function(){// Add orange and remove watermelon after 1 second setTimeout(function(){this.setState({value: ['apple','orange']})}.bind(this), 1000)}, render: function(){// the checkboxes can be arbitrarily deep. They will always be fetched and // attached the `name` attribute correctly. `value` is optional return ( <CheckboxGroupname="fruits" value={this.state.value}ref="fruitsGroup" onChange={this.handleChange}><div><label><inputtype="checkbox" value="apple"/>Apple </label><label><inputtype="checkbox" value="orange"/>Orange </label><label><inputtype="checkbox" value="watermelon"/>Watermelon </label></div></CheckboxGroup> )}, handleChange: function(){// will return the currently selected checkbox values as an array, possibly empty var selectedFruits = this.refs.fruitsGroup.getCheckedValues()} }); React.renderComponent(<Demo/>, document.body);MIT.