⚛ React Checkbox Context

This package was heavily inspired by react-checkbox-group after it stopped working the way I used it. elements suddenly had to be direct children of (which was impossible for my use case) or the CheckboxGroup explicitly needed to have a checkboxDepth prop (which was not flexible enough for me). So I decided to write my own component based on React's (then) new Context API.

Big thank you to Ziad Saab for the inspiration!

Installation

``
npm install react-checkbox-context
`

or

`
yarn add react-checkbox-context
`

Example

What does react-checkbox-context do and how does it do that? Let me borrow the example from react-checkbox-group since the API is mostly identical:

This is your average checkbox group:

`jsx



Apple
Orange
{' '}
Watermelon



`

Repetitive, hard to manipulate and easily desynchronized. Lift up name and onChange, and give the group an initial checked values array:

`jsx
import { Checkbox, CheckboxGroup } from 'react-checkbox-context';


Kiwi
Pineapple
Watermelon
;
`

Since this component uses React's Context API, elements can by anywhere inside of a and do not have to be a direct descendant! So this is easily possible without having to specify any checkboxDepth props or the like:

`jsx
name="frameworks"
onChange={(event, selectedValues) => {
console.log(selectedValues);
}}
>




React



Vue

`

Attention: When migrating from react-checkbox-group please note that the prop name to pass the values to a CheckboxGroup is named values instead of value.

Props

$3

| Prop | Type | Description |
| ---------- | ------------------------------------------------ | ---------------------------------------------------------- |
| onChange | (event: ChangeEvent, values: string[]) => void | Will be called on every time a checkbox changes its state. |
| name | string | Name for all checkboxes within one |
| values | string[] | Values of the elements marked as checked |

Status of checkboxes (checked/unchecked) can be controlled from outside by passing new values to (e.g. ).

$3

The Checkbox component passes all of its props the the underlying element. All valid HTML attributes can be used with the exception of checked, name, onChange as they will be set by the parent component.

Todo

- Add more tests, more specifically a test if onChange` events are fired correctly.

License

MIT.