React Checkbox component
npm install @trendmicro/react-checkbox
React Checkbox
Demo: https://trendmicro-frontend.github.io/react-checkbox
1. Install the latest version of react and 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';
`
`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...
`
`js
// Default checked
// Default partially checked
`
`js
// Checked
// Partially checked
`
When rendering checkboxes deeply nested inside the checkbox group, you need to pass a depth prop to limit the recursion depth.
`jsx`
value={this.state.value}
depth={3} // This is needed to minimize the recursion overhead
onChange={(value, event) => {
this.setState({ value: value });
}}
>
You may need to use event.stopPropagation() to stop onChange propagation when wrapping an input element inside the CheckboxGroup or Checkbox component.
`jsx`
value={this.state.value}
onChange={(value, event) => {
this.setState({ value: value });
}}
>
onChange={(event) => {
// Prevent onChange propagation
event.stopPropagation();
}}
/>
onChange={(event) => {
// Prevent onChange propagation
event.stopPropagation();
}}
/>
#### 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.
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.
MIT