accessible-react-checkbox-group

    2.0.0-beta.4 • Public • Published

    accessible-react-checkbox-group

    Travis npm package Coveralls

    About

    This is a remake of react-checkbox-group that adds full accessibility support. Some other issues are also fixed, such as using React's context API for efficiency and to allow for HOCs.

    Reasoning

    This is your average checkbox group:

    <form>
      <input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="apple" />Apple
      <input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="orange" />Orange
      <input onChange={this.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:

    import {Checkbox, CheckboxGroup} from 'accessible-react-checkbox-group';
     
    <CheckboxGroup name="fruits" checkedValues={['kiwi', 'pineapple']} onChange={this.fruitsChanged}>
      <Checkbox value="kiwi"/>
      <Checkbox value="pineapple"/>
      <Checkbox value="watermelon"/>
    </CheckboxGroup>

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

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

    and further

    function handleChange(newValues) {
      // ['apple']
    }

    That's it for the API! See below for a complete example.

    Install

    bower install accessible-react-checkbox-group

    or

    npm install accessible-react-checkbox-group

    Simply require/import it to use it:

    var Check = require('accessible-react-checkbox-group');
    var Checkbox = Check.Checkbox;
    var CheckboxGroup = Check.CheckboxGroup;
     
    // or ES6
    import {Checkbox, CheckboxGroup} from 'accessible-react-checkbox-group';

    How to Contribute

    Please check out CONTRIBUTING.md for information on contributing.

    Install

    npm i accessible-react-checkbox-group

    DownloadsWeekly Downloads

    10

    Version

    2.0.0-beta.4

    License

    MIT

    Unpacked Size

    1.2 MB

    Total Files

    49

    Last publish

    Collaborators

    • dumptruckman