Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/createnl/grouped-checkboxes
Check all checkboxes
https://github.com/createnl/grouped-checkboxes
check-all checkbox-treeview checkboxes react
Last synced: 3 months ago
JSON representation
Check all checkboxes
- Host: GitHub
- URL: https://github.com/createnl/grouped-checkboxes
- Owner: createnl
- License: mit
- Created: 2019-10-01T12:49:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-18T04:12:33.000Z (over 1 year ago)
- Last Synced: 2024-09-27T10:23:39.097Z (4 months ago)
- Topics: check-all, checkbox-treeview, checkboxes, react
- Language: TypeScript
- Size: 723 KB
- Stars: 16
- Watchers: 4
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Grouped Checkboxes
[](https://codecov.io/gh/createnl/grouped-checkboxes)
[](https://travis-ci.org/createnl/grouped-checkboxes)
[](https://github.com/createnl/grouped-checkboxes/blob/master/LICENSE)
[](https://www.npmjs.com/package/@createnl/grouped-checkboxes)
[](https://github.com/facebook/react)
An easy to use React Component to create a checkbox group with a checkbox to check all checkboxes and a checkbox to check none.
## Installation
```
npm install --save @createnl/grouped-checkboxes
```
```
yarn add @createnl/grouped-checkboxes
```
## Example
[](https://v5sww.csb.app/)
Live examples: https://v5sww.csb.app/
Codesandbox: https://codesandbox.io/s/grouped-checkboxes-v5sww
``` jsx harmony
import React from "react";
import { AllCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';
const MyGroupedCheckboxes = (props) => {
const onCheckboxChange = (checkboxes) => {
console.log(checkboxes);
}
return (
);
};
```
Note that `Checkbox` and `AllCheckerCheckbox` must be inside a `CheckboxGroup`
## Features
- Multiple `AllCheckerCheckboxes` and `NoneCheckerCheckboxes` inside a group
- `onChange` callback on group
- Possibility to nest checkboxes in your own components
- Possibility to check or disable by default
- You can do anything with a `Checkbox` you can do to an `input` component
- Fully Typed
## Advanced examples
### Checking checkboxes
```jsx harmony
// Set defaultChecked to check all by default
// Error: You cant contol allCheckerCheckboxes individually (will check automatically if necessary)
// Check individual checkboxes
```
### Disabling checkboxes
```jsx harmony
// Set defaultDisabled to disable all by default
// Disable allCheckerCheckbox, will still check if all checkboxes are checked
// Disable individual checkboxes
```
### Real life example (with check all)
``` jsx harmony
import React from "react";
import { AllCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';
const PermissionsFrom = (props) => {
const onCheckboxChange = (checkboxes) => {
console.log(checkboxes);
}
return (
Terms and Conditions
Privacy Policy
Advertisements
Agree to all
);
};
```
The value of an onChange parameter looks like:
```json
[
{
"checked": true,
"disabled": false,
"value": "tos"
},
{
"checked": true,
"disabled": false,
"value": "privacy-policy"
},
{
"checked": true,
"disabled": false,
"value": "advertisements"
}
]
```
All given props will be accessible.
### Real life example (with none-checker)
If you need a checkbox that will check when nothing is checked you can use the NoneCheckerCheckbox.
This checkbox can be clicked to uncheck everything else, but can't be unchecked to check everything else.
``` jsx harmony
import React from "react";
import { NoneCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';
const LunchDeclaration = (props) => {
const onCheckboxChange = (checkboxes) => {
console.log(checkboxes);
}
return (
What did you eat for lunch?
Pizza
Burger
Fries
Nothing
);
};
```
The value of an onChange parameter looks like:
```json
[
{
"checked": true,
"disabled": false,
"value": "pizza"
},
{
"checked": true,
"disabled": false,
"value": "burger"
},
{
"checked": true,
"disabled": false,
"value": "fries"
}
]
```
Note that the value of the NoneCheckerCheckbox will not be passed.
### Accessing the native input
The `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.
This enables you to control the DOM node and for example focus on the element.
``` jsx harmony
import React from "react";
import { AllCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';
const MyGroupedCheckboxes = (props) => {
const checkboxRef = React.createRef();
React.useEffect(() => {
if (checkboxRef.current) {
// Focus on the input element
checkboxRef.current.focus();
}
}, [checkboxRef])
return (
);
};