https://github.com/manuelbieh/react-checkbox-context
Tiny package to make it easier to work with a group of checkboxes in React
https://github.com/manuelbieh/react-checkbox-context
checkbox checkbox-component checkbox-group react react-checkbox
Last synced: 11 months ago
JSON representation
Tiny package to make it easier to work with a group of checkboxes in React
- Host: GitHub
- URL: https://github.com/manuelbieh/react-checkbox-context
- Owner: manuelbieh
- License: mit
- Created: 2018-04-03T23:38:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T21:14:40.000Z (over 3 years ago)
- Last Synced: 2025-04-03T15:21:17.644Z (about 1 year ago)
- Topics: checkbox, checkbox-component, checkbox-group, react, react-checkbox
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-checkbox-context
- Size: 3.11 MB
- Stars: 12
- Watchers: 2
- Forks: 4
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ⚛ React Checkbox Context
This package was heavily inspired by [react-checkbox-group](https://github.com/ziad-saab/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](https://reactjs.org/docs/context.html).
Big thank you to [Ziad Saab](https://github.com/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
{
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
### ``
| 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. ``).
### ``
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.