Never-ending Pumpkin Mulch

    @trendmicro/react-checkbox

    3.4.1 • Public • Published

    react-checkbox build status Coverage Status

    NPM

    React Checkbox

    Demo: https://trendmicro-frontend.github.io/react-checkbox

    Installation

    1. Install the latest version of react and react-checkbox:
    npm install --save react @trendmicro/react-checkbox
    
    1. At this point you can import @trendmicro/react-checkbox and its styles in your application as follows:
    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

    <Checkbox label="Checkbox label" />

    The label prop is optional, you can use children to pass through the component.

    <Checkbox label="Checkbox label">
        <p style={{ marginLeft: 24 }}>
            Lorem ipsum dolor sit amet...
        </p>
    </Checkbox>
    
    <Checkbox>
        <span style={{ verticalAlign: 'middle', marginLeft: 8 }}>
            Lorem ipsum dolor sit amet...
        </span>
    </Checkbox>

    Uncontrolled Checkbox

    // Default checked
    <Checkbox defaultChecked />
    
    // Default partially checked
    <Checkbox defaultChecked defaultIndeterminate />

    Controlled Checkbox

    // Checked
    <Checkbox checked />
    
    // Partially checked
    <Checkbox checked indeterminate />

    CheckboxGroup

    When rendering checkboxes deeply nested inside the checkbox group, you need to pass a depth prop to limit the recursion depth.

    <CheckboxGroup
        name="comic"
        value={this.state.value}
        depth={3} // This is needed to minimize the recursion overhead
        onChange={(value, event) => {
            this.setState({ value: value });
        }}
    >
        <div className="row">
            <div className="col-xs-12 col-sm-6">
                <Checkbox label="Batman (DC)" value="dc:batman" />
                <Checkbox label="Hulk (Marvel)" value="marvel:hulk" />
            </div>
            <div className="col-xs-12 col-sm-6">
                <Checkbox label="Superman (DC)" value="dc:superman" />
                <Checkbox label="Spider-Man (Marvel)" value="marvel:spiderman" disabled />
            </div>
        </div>
    </CheckboxGroup>

    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.

    <CheckboxGroup
        name="checkboxgroup"
        value={this.state.value}
        onChange={(value, event) => {
            this.setState({ value: value });
        }}
    >
        <Checkbox label="First option" value="one">
            <div style={{ marginLeft: 22 }}>
                <input
                    type="text"
                    onChange={(event) => {
                        // Prevent onChange propagation
                        event.stopPropagation();
                    }}
                />
            </div>
        </Checkbox>
        <Checkbox label="Second option" value="two">
            <div style={{ marginLeft: 22 }}>
                <input
                    type="text"
                    onChange={(event) => {
                        // Prevent onChange propagation
                        event.stopPropagation();
                    }}
                />
            </div>
        </Checkbox>
    </CheckboxGroup>

    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:

    <Checkbox
        ref={node => {
            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:

    <CheckboxGroup
        ref={node => {
            if (node) {
                this.checkboxGroup = node;
                console.log(this.checkboxGroup.value);
            }
        }}
    />
    Name Type Description
    value any Get the value of the checkbox group.

    License

    MIT

    Install

    npm i @trendmicro/react-checkbox

    DownloadsWeekly Downloads

    654

    Version

    3.4.1

    License

    MIT

    Unpacked Size

    53.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase