accessible-react-checkbox-group

A rewrite of react-checkbox-group with accessibility features

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Aug 13, 2018Apr 10, 2018Minified + gzip package size for accessible-react-checkbox-group in KB

Readme

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.