Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trendmicro-frontend/react-checkbox
React Checkbox component
https://github.com/trendmicro-frontend/react-checkbox
Last synced: 26 days ago
JSON representation
React Checkbox component
- Host: GitHub
- URL: https://github.com/trendmicro-frontend/react-checkbox
- Owner: trendmicro-frontend
- License: mit
- Created: 2017-05-10T08:39:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-09-22T14:07:27.000Z (over 1 year ago)
- Last Synced: 2024-12-12T12:18:08.442Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://trendmicro-frontend.github.io/react-checkbox
- Size: 4.25 MB
- Stars: 7
- Watchers: 19
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-checkbox - React Checkbox component ([demo](https://trendmicro-frontend.github.io/react-checkbox/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-checkbox - React Checkbox component ([demo](https://trendmicro-frontend.github.io/react-checkbox/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-checkbox - React Checkbox component ([demo](https://trendmicro-frontend.github.io/react-checkbox/)). (Trend Micro / React Components)
README
# react-checkbox [](https://travis-ci.org/trendmicro-frontend/react-checkbox) [](https://coveralls.io/github/trendmicro-frontend/react-checkbox?branch=master)
[](https://nodei.co/npm/@trendmicro/react-checkbox/)
React Checkbox
Demo: https://trendmicro-frontend.github.io/react-checkbox
## Installation
1. Install the latest version of [react](https://github.com/facebook/react) and [react-checkbox](https://github.com/trendmicro-frontend/react-checkbox):
```
npm install --save react @trendmicro/react-checkbox
```
2. At this point you can import `@trendmicro/react-checkbox` and its styles in your application as follows:
```js
import { Checkbox, CheckboxGroup } from '@trendmicro/react-checkbox';
// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-checkbox/dist/react-checkbox.css';
```
## Usage
```jsx
```
The label prop is optional, you can use children to pass through the component.
```jsx
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
```
### Uncontrolled Checkbox
```js
// Default checked
// Default partially checked
```
### Controlled Checkbox
```js
// Checked
// Partially checked
```
### CheckboxGroup
When rendering checkboxes deeply nested inside the checkbox group, you need to pass a `depth` prop to limit the recursion depth.
```jsx
{
this.setState({ value: value });
}}
>
```
## Prevent onChange Propagation
You may need to use `event.stopPropagation()` to stop **onChange** propagation when wrapping an input element inside the **CheckboxGroup** or **Checkbox** component.
```jsx
{
this.setState({ value: value });
}}
>
{
// Prevent onChange propagation
event.stopPropagation();
}}
/>
{
// Prevent onChange propagation
event.stopPropagation();
}}
/>
```
## API
### Properties
#### Checkbox
Name | Type | Default | Description
:--- | :--- | :------ | :----------
children | any | | Children to pass through the component.
className | Object | | Customized class name for the component.
style | Object | | Customized style for the component.
label | Node or String | | Text label to attach next to the checkbox element.
inputClassName | Object | | Customized class name for the checkbox element.
inputStyle | Object | | Customized style for the checkbox element.
disabled | Boolean | false | If true, the checkbox shown as disabled and cannot be modified.
checked | Boolean | | The checked state of the checkbox element.
defaultChecked | Boolean | | The default checked state of the checkbox element.
indeterminate | Boolean | | The indeterminate state of the checkbox element.
defaultIndeterminate | Boolean | false | The default indeterminate state of the checkbox element.
onChange | Function(event) | | The callback function that is triggered when the state changes.
onClick | Function(event) | | The callback function that is triggered when the checkbox is clicked.
#### CheckboxGroup
Name | Type | Default | Description
:--- | :--- | :------ | :----------
children | any | | Children to pass through the component.
disabled | Boolean | false | If true, the checkbox group will be displayed as disabled.
name | String | | Name for the input element group.
value | any | | The value of the checkbox group.
defaultValue | any | | The default value of the checkbox group.
onChange | Function(value, event) | | The callback function that is triggered when the value changes.
depth | Number | 1 | Limits the recursion depth when rendering checkboxes deeply inside a checkbox group.
### Class Properties
Use the ref property to get a reference to the component:
```jsx
{
if (node) {
this.checkbox = node;
console.log(this.checkbox.checked);
console.log(this.checkbox.indeterminate);
}
}}
/>
```
Name | Type | Description
:--- | :--- | :----------
checked | Boolean | Get the checked state.
indeterminate | Boolean | Get the indeterminate state.
#### CheckboxGroup
Use the ref property to get a reference to this component:
```jsx
{
if (node) {
this.checkboxGroup = node;
console.log(this.checkboxGroup.value);
}
}}
/>
```
Name | Type | Description
:--- | :--- | :----------
value | any | Get the value of the checkbox group.
## License
MIT