checkbox-group
v2.0.0
Published
React Checkbox Group Component
Downloads
14
Readme
checkbox-group
React Checkbox Group Component
This component is based on the react-radio-group project by Cheng Lou. It behaves very similarly.
When making a checkbox group in an HTML form you want to be able to easily select a boxes by default, be able to respond to selection changes, and control the styling and HTML markup of your form. That's what this react component provides.
Example
import React from 'react';
import checkboxGroup from 'checkbox-group';
const CheckboxGroup = checkboxGroup(React);
function handleChange(values) {
// callback is passed an array of the values which are selected.
}
<CheckboxGroup name="fruit" values={['orange']} onSelection={handleChange}>
{Checkbox =>
<div>
<Checkbox value="apple" />Apple
<Checkbox value="orange" />Orange
<Checkbox value="watermelon" />Watermelon
</div>
}
</CheckboxGroup>
Produces this HTML when rendered by a component:
<div>
<input type="checkbox" name="fruit" value="apple" />Apple
<input type="checkbox" name="fruit" value="orange" checked />Orange
<input type="checkbox" name="fruit" value="watermelon" />Watermelon
</div>
API
Factory Function
checkboxGroup :: (React) => props => ReactElement
This module exports factory function which takes your instances of React
, and returns the
constructor for a CheckboxGroup
component.
import checkboxGroup from 'checkbox-group';
const CheckboxGroup = checkboxGroup(React);
Component
Props:
- children func required A function which builds the content of the radio group
- values array An array of values used to compare against the values of the
Checkbox
components in order to select them by default on first render. - onSelection func A callback function which is called with a value, whenever the radio group's selection is changed.
- name string A unique name for identifying the checkbox inputs. What you'd normally put as the
name
prop on a checkbox input tag.
Component
(Since you're getting that as the argument of your children function, you could have named it anything you wanted really.) Any prop you pass onto it will be transferred to the actual input under the hood.
Contributing
See contributing.md