Package Exports

react-checkbox-group

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-checkbox-group) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-checkbox-group

Heavily inspired from https://github.com/chenglou/react-radio-group

This is your average checkbox group:

<form>
  <input type="checkbox" name="fruit" value="apple" />Apple
  <input type="checkbox" name="fruit" value="orange" />Orange
  <input type="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:

<CheckboxGroup name="fruit" value={['apple','watermelon']}>
  <input type="checkbox" value="apple" />Apple
  <input type="checkbox" value="orange" />Orange
  <input type="checkbox" value="watermelon" />Watermelon
</CheckboxGroup>

Listen for changes, get the new value as intuitively as possible:

<CheckboxGroup name="fruit" value={['apple','watermelon']} ref="fruitsGroup" onChange={this.handleChange}>
// further...

this.refs.fruitsGroup.getCheckedValues(); // => whatever's currently checked

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 it to use it:

var CheckboxGroup = require('react-checkbox-group');

Example

/**
* @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 (
      <CheckboxGroup
        name="fruits"
        value={this.state.value}
        ref="fruitsGroup"
        onChange={this.handleChange}
      >
        <div>
          <label>
            <input type="checkbox" value="apple"/>Apple
          </label>
          <label>
            <input type="checkbox" value="orange"/>Orange
          </label>
          <label>
            <input type="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);

License

MIT.