{"id":16347348,"url":"https://github.com/manuelbieh/react-checkbox-context","last_synced_at":"2025-07-20T06:33:15.327Z","repository":{"id":31465819,"uuid":"127981089","full_name":"manuelbieh/react-checkbox-context","owner":"manuelbieh","description":"Tiny package to make it easier to work with a group of checkboxes in React","archived":false,"fork":false,"pushed_at":"2022-12-10T21:14:40.000Z","size":3260,"stargazers_count":12,"open_issues_count":26,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T15:21:17.644Z","etag":null,"topics":["checkbox","checkbox-component","checkbox-group","react","react-checkbox"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-checkbox-context","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manuelbieh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-03T23:38:58.000Z","updated_at":"2023-09-06T01:24:50.000Z","dependencies_parsed_at":"2022-08-29T02:11:20.431Z","dependency_job_id":null,"html_url":"https://github.com/manuelbieh/react-checkbox-context","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/manuelbieh/react-checkbox-context","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelbieh%2Freact-checkbox-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelbieh%2Freact-checkbox-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelbieh%2Freact-checkbox-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelbieh%2Freact-checkbox-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manuelbieh","download_url":"https://codeload.github.com/manuelbieh/react-checkbox-context/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelbieh%2Freact-checkbox-context/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266076350,"owners_count":23872741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox","checkbox-component","checkbox-group","react","react-checkbox"],"created_at":"2024-10-11T00:41:40.000Z","updated_at":"2025-07-20T06:33:15.299Z","avatar_url":"https://github.com/manuelbieh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚛ React Checkbox Context\n\nThis 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. `\u003cCheckbox /\u003e` elements suddenly had to be direct children of `\u003cCheckboxGroup\u003e` (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 `\u003cCheckboxGroup\u003e` component based on React's (then) new [Context API](https://reactjs.org/docs/context.html).\n\nBig thank you to [Ziad Saab](https://github.com/ziad-saab) for the inspiration!\n\n## Installation\n\n```\nnpm install react-checkbox-context\n```\n\nor\n\n```\nyarn add react-checkbox-context\n```\n\n## Example\n\nWhat 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:\n\nThis is your average checkbox group:\n\n```jsx\n\u003cform\u003e\n    \u003cinput onChange={this.handleFruitChange} type=\"checkbox\" name=\"fruit\" value=\"apple\" /\u003e Apple\n    \u003cinput onChange={this.handleFruitChange} type=\"checkbox\" name=\"fruit\" value=\"orange\" /\u003e Orange\n    \u003cinput onChange={this.handleFruitChange} type=\"checkbox\" name=\"fruit\" value=\"watermelon\" /\u003e{' '}\n    Watermelon\n\u003c/form\u003e\n```\n\nRepetitive, hard to manipulate and easily desynchronized. Lift up name and onChange, and give the group an initial checked values array:\n\n```jsx\nimport { Checkbox, CheckboxGroup } from 'react-checkbox-context';\n\n\u003cCheckboxGroup name=\"fruits\" values={['kiwi', 'pineapple']}\u003e\n    \u003cCheckbox value=\"kiwi\" /\u003e Kiwi\n    \u003cCheckbox value=\"pineapple\" /\u003e Pineapple\n    \u003cCheckbox value=\"watermelon\" /\u003e Watermelon\n\u003c/CheckboxGroup\u003e;\n```\n\nSince this component uses React's Context API, `\u003cCheckbox\u003e` elements can by anywhere inside of a `\u003cCheckboxGroup\u003e` and **do not** have to be a direct descendant! So this is easily possible **without** having to specify any `checkboxDepth` props or the like:\n\n```jsx\n\u003cCheckboxGroup\n    name=\"frameworks\"\n    onChange={(event, selectedValues) =\u003e {\n        console.log(selectedValues);\n    }}\n\u003e\n    \u003cp\u003e\n        \u003clabel htmlFor=\"react\"\u003e\n            \u003cCheckbox value=\"react\" id=\"react\" /\u003e React\n        \u003c/label\u003e\n    \u003c/p\u003e\n    \u003cp\u003e\n        \u003clabel htmlFor=\"vue\"\u003e\n            \u003cCheckbox value=\"vue\" id=\"vue\" /\u003e Vue\n        \u003c/label\u003e\n    \u003c/p\u003e\n\u003c/CheckboxGroup\u003e\n```\n\n**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`.\n\n## Props\n\n### `\u003cCheckboxGroup /\u003e`\n\n| Prop       | Type                                             | Description                                                |\n| ---------- | ------------------------------------------------ | ---------------------------------------------------------- |\n| `onChange` | `(event: ChangeEvent, values: string[]) =\u003e void` | Will be called on every time a checkbox changes its state. |\n| `name`     | `string`                                         | Name for all checkboxes within one `\u003cCheckboxGroup\u003e`       |\n| `values`   | `string[]`                                       | Values of the `\u003cCheckbox\u003e` elements marked as `checked`    |\n\nStatus of checkboxes (checked/unchecked) can be controlled from outside by passing new values to `\u003cCheckboxGroup\u003e` (e.g. `\u003cCheckboxGroup values={this.state.checkedItems} /\u003e`).\n\n### `\u003cCheckbox /\u003e`\n\nThe `Checkbox` component passes all of its props the the underlying `\u003cinput type=\"checkbox\" /\u003e` element. All valid HTML attributes can be used with the exception of `checked`, `name`, `onChange` as they will be set by the parent `\u003cCheckboxGroup\u003e` component.\n\n## Todo\n\n-   Add more tests, more specifically a test if `onChange` events are fired correctly.\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelbieh%2Freact-checkbox-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanuelbieh%2Freact-checkbox-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelbieh%2Freact-checkbox-context/lists"}