{"id":19317197,"url":"https://github.com/createnl/grouped-checkboxes","last_synced_at":"2025-04-22T17:30:50.824Z","repository":{"id":35699103,"uuid":"212094637","full_name":"createnl/grouped-checkboxes","owner":"createnl","description":"Check all checkboxes","archived":false,"fork":false,"pushed_at":"2023-10-18T04:12:33.000Z","size":740,"stargazers_count":16,"open_issues_count":9,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-09-27T10:23:39.097Z","etag":null,"topics":["check-all","checkbox-treeview","checkboxes","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/createnl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-01T12:49:18.000Z","updated_at":"2023-06-28T08:20:26.000Z","dependencies_parsed_at":"2024-06-21T14:22:44.221Z","dependency_job_id":"2fb0bcc2-f508-474e-ac21-5e54fdf3ad98","html_url":"https://github.com/createnl/grouped-checkboxes","commit_stats":{"total_commits":38,"total_committers":6,"mean_commits":6.333333333333333,"dds":"0.42105263157894735","last_synced_commit":"a1f0da7d19b1d08b0487950b4714e717eb372b4e"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/createnl%2Fgrouped-checkboxes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/createnl%2Fgrouped-checkboxes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/createnl%2Fgrouped-checkboxes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/createnl%2Fgrouped-checkboxes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/createnl","download_url":"https://codeload.github.com/createnl/grouped-checkboxes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223900177,"owners_count":17222028,"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":["check-all","checkbox-treeview","checkboxes","react"],"created_at":"2024-11-10T01:14:08.246Z","updated_at":"2024-11-10T01:14:08.930Z","avatar_url":"https://github.com/createnl.png","language":"TypeScript","readme":"# Grouped Checkboxes\n[![codecov](https://codecov.io/gh/createnl/grouped-checkboxes/branch/master/graph/badge.svg)](https://codecov.io/gh/createnl/grouped-checkboxes)\n[![Build Status](https://travis-ci.org/createnl/grouped-checkboxes.svg?branch=master)](https://travis-ci.org/createnl/grouped-checkboxes)\n[![GitHub](https://img.shields.io/github/license/createnl/grouped-checkboxes)](https://github.com/createnl/grouped-checkboxes/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/dt/@createnl/grouped-checkboxes)](https://www.npmjs.com/package/@createnl/grouped-checkboxes)\n[![React](https://img.shields.io/badge/React-\u003e=16.8.0-brightgreen)](https://github.com/facebook/react)\n\nAn easy to use React Component to create a checkbox group with a checkbox to check all checkboxes and a checkbox to check none.\n\n## Installation\n```\nnpm install --save @createnl/grouped-checkboxes\n```\n```\nyarn add @createnl/grouped-checkboxes\n```\n\n## Example\n[![See examples](example.gif)](https://v5sww.csb.app/)\n\nLive examples: https://v5sww.csb.app/\n\nCodesandbox: https://codesandbox.io/s/grouped-checkboxes-v5sww\n\n``` jsx harmony\nimport React from \"react\";\nimport { AllCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';\n\nconst MyGroupedCheckboxes = (props) =\u003e {\n    const onCheckboxChange = (checkboxes) =\u003e {\n        console.log(checkboxes);\n    }    \n\n    return (\n        \u003cCheckboxGroup onChange={onCheckboxChange}\u003e\n          \u003cAllCheckerCheckbox /\u003e\n          \u003cCheckbox value=\"option-1\"/\u003e\n          \u003cCheckbox value=\"option-2\" /\u003e\n          \u003cCheckbox value=\"option-3\" /\u003e\n        \u003c/CheckboxGroup\u003e\n    );\n};\n```\nNote that `Checkbox` and `AllCheckerCheckbox` must be inside a `CheckboxGroup`\n\n## Features\n- Multiple `AllCheckerCheckboxes` and `NoneCheckerCheckboxes` inside a group\n- `onChange` callback on group\n- Possibility to nest checkboxes in your own components\n- Possibility to check or disable by default\n- You can do anything with a `Checkbox` you can do to an `input` component\n- Fully Typed\n\n## Advanced examples\n\n### Checking checkboxes\n```jsx harmony\n\u003cCheckboxGroup defaultChecked\u003e // Set defaultChecked to check all by default\n  \u003cAllCheckerCheckbox checked/\u003e // Error: You cant contol allCheckerCheckboxes individually (will check automatically if necessary)\n  \u003cCheckbox value=\"anything\" checked/\u003e // Check individual checkboxes\n\u003c/CheckboxGroup\u003e\n```\n\n### Disabling checkboxes\n```jsx harmony\n\u003cCheckboxGroup defaultDisabled\u003e // Set defaultDisabled to disable all by default\n  \u003cAllCheckerCheckbox disabled/\u003e // Disable allCheckerCheckbox, will still check if all checkboxes are checked\n  \u003cCheckbox value=\"anything\" disabled/\u003e // Disable individual checkboxes\n\u003c/CheckboxGroup\u003e\n```\n\n### Real life example (with check all)\n``` jsx harmony\nimport React from \"react\";\nimport { AllCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';\n\nconst PermissionsFrom = (props) =\u003e {\n    const onCheckboxChange = (checkboxes) =\u003e {\n        console.log(checkboxes);\n    }    \n\n    return (\n        \u003cCheckboxGroup onChange={console.log}\u003e\n          \u003clabel\u003e\n            \u003cCheckbox value=\"tos\" /\u003e\n            Terms and Conditions\n          \u003c/label\u003e\n          \u003clabel\u003e\n            \u003cCheckbox value=\"privacy-policy\" /\u003e\n            Privacy Policy\n          \u003c/label\u003e\n          \u003clabel\u003e\n            \u003cCheckbox value=\"advertisements\" /\u003e\n            Advertisements\n          \u003c/label\u003e\n          \u003clabel\u003e\n            \u003cAllCheckerCheckbox /\u003e\n            Agree to all\n          \u003c/label\u003e\n        \u003c/CheckboxGroup\u003e\n    );\n};\n```\n\nThe value of an onChange parameter looks like:\n```json\n[\n    {\n        \"checked\": true,\n        \"disabled\": false,\n        \"value\": \"tos\"\n    },\n    {\n        \"checked\": true,\n        \"disabled\": false,\n        \"value\": \"privacy-policy\"\n    }, \n    {\n        \"checked\": true,\n        \"disabled\": false,\n        \"value\": \"advertisements\"\n    }\n]\n```\nAll given props will be accessible.\n\n### Real life example (with none-checker)\nIf you need a checkbox that will check when nothing is checked you can use the NoneCheckerCheckbox.\nThis checkbox can be clicked to uncheck everything else, but can't be unchecked to check everything else. \n\n``` jsx harmony\nimport React from \"react\";\nimport { NoneCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';\n\nconst LunchDeclaration = (props) =\u003e {\n    const onCheckboxChange = (checkboxes) =\u003e {\n        console.log(checkboxes);\n    }    \n\n    return (\n        \u003cCheckboxGroup onChange={console.log}\u003e\n          \u003ch1\u003eWhat did you eat for lunch?\u003c/h1\u003e\n          \u003clabel\u003e\n            \u003cCheckbox value=\"pizza\" /\u003e\n            Pizza\n          \u003c/label\u003e\n          \u003clabel\u003e\n            \u003cCheckbox value=\"burger\" /\u003e\n            Burger\n          \u003c/label\u003e\n          \u003clabel\u003e\n            \u003cCheckbox value=\"fries\" /\u003e\n            Fries\n          \u003c/label\u003e\n          \u003clabel\u003e\n            \u003cNoneCheckerCheckbox /\u003e\n            Nothing\n          \u003c/label\u003e\n        \u003c/CheckboxGroup\u003e\n    );\n};\n```\nThe value of an onChange parameter looks like:\n```json\n[\n    {\n        \"checked\": true,\n        \"disabled\": false,\n        \"value\": \"pizza\"\n    },\n    {\n        \"checked\": true,\n        \"disabled\": false,\n        \"value\": \"burger\"\n    }, \n    {\n        \"checked\": true,\n        \"disabled\": false,\n        \"value\": \"fries\"\n    }\n]\n```\nNote that the value of the NoneCheckerCheckbox will not be passed.\n\n### Accessing the native input\nThe `Checkbox`, `AllCheckerCheckbox` and `NoneCheckerCheckboxes` are nothing more than controlled native input elements and uses the [forwardRef](https://reactjs.org/docs/forwarding-refs.html) function for you to pass your ref to.\nThis enables you to control the DOM node and for example focus on the element.\n\n``` jsx harmony\nimport React from \"react\";\nimport { AllCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';\n\nconst MyGroupedCheckboxes = (props) =\u003e {\n    const checkboxRef = React.createRef();\n\n    React.useEffect(() =\u003e {\n        if (checkboxRef.current) {\n            // Focus on the input element\n            checkboxRef.current.focus();\n        }\n    }, [checkboxRef])\n\n    return (\n        \u003cCheckboxGroup\u003e\n          \u003cAllCheckerCheckbox /\u003e\n          \u003cCheckbox ref={checkboxRef} value=\"option-1\"/\u003e\n          \u003cCheckbox value=\"option-2\" /\u003e\n          \u003cCheckbox value=\"option-3\" /\u003e\n        \u003c/CheckboxGroup\u003e\n    );\n};\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreatenl%2Fgrouped-checkboxes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreatenl%2Fgrouped-checkboxes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreatenl%2Fgrouped-checkboxes/lists"}