Neighbourhood Party Manager

    @trendmicro/react-radio

    4.0.0-alpha • Public • Published

    react-radio build status Coverage Status

    NPM

    React Radio

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

    Installation

    1. Install the latest version of react and react-radio:
    npm install --save react @trendmicro/react-radio
    
    1. At this point you can import @trendmicro/react-radio and its styles in your application as follows:
    import { RadioButton, RadioGroup } from '@trendmicro/react-radio';
    
    // Be sure to include styles at some point, probably during your bootstraping
    import '@trendmicro/react-radio/dist/react-radio.css';

    Usage

    RadioButton

    <RadioButton>RadioButton label</RadioButton>

    You can use children to pass through the component.

    <RadioButton>
        <span style={{ verticalAlign: 'middle', marginLeft: 8 }}>
            Lorem ipsum dolor sit amet...
        </span>
    </RadioButton>

    Or pass tag to customize the wrapper component.

    <RadioButton tag='span'>
        Lorem ipsum dolor sit amet...
    </RadioButton>

    Uncontrolled RadioButton

    // Default checked
    <RadioButton defaultChecked />

    Controlled RadioButton

    // Checked
    <RadioButton checked />

    RadioGroup

    <RadioGroup
        name="comic"
        value={this.state.value}
        onChange={(event) => {
            const value = event.target.value;
            this.setState({ value: value });
        }}
    >
        <div className="row">
            <div className="col-xs-12 col-sm-6">
                <RadioButton value="dc:batman">Batman (DC)</RadioButton>
                <RadioButton value="marvel:hulk">Hulk (Marvel)</RadioButton>
            </div>
            <div className="col-xs-12 col-sm-6">
                <RadioButton value="dc:superman">Superman (DC)</RadioButton>
                <RadioButton value="marvel:spiderman" disabled>Spider-Man (Marvel)</RadioButton>
            </div>
        </div>
    </RadioGroup>

    Prevent onChange Propagation

    You may need to use event.stopPropagation() to stop onChange propagation when wrapping an input element inside the RadioGroup or RadioButton component.

    <RadioGroup
        name="radiogroup"
        value={this.state.value}
        onChange={(event) => {
            const value = event.target.value;
            this.setState({ value: value });
        }}
    >
        <RadioButton value="one">
            <span>First option</span>
            <div style={{ marginLeft: 22 }}>
                <input
                    type="text"
                    onChange={(event) => {
                        // Prevent onChange propagation
                        event.stopPropagation();
                    }}
                />
            </div>
        </RadioButton>
        <RadioButton value="two">
            <span>Second option</span>
            <div style={{ marginLeft: 22 }}>
                <input
                    type="text"
                    onChange={(event) => {
                        // Prevent onChange propagation
                        event.stopPropagation();
                    }}
                />
            </div>
        </RadioButton>
    </RadioGroup>

    API

    Properties

    RadioButton

    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.
    checked Boolean If true, the radio button will be selected. Transferred from the radio group.
    defaultChecked Boolean The default checked state of the radio button.
    disabled Boolean false If true, the radio button will be shown as disabled and cannot be modified.
    tag Function or String label Customized wrapper component to replace label.
    id String Id for the input field of radio button.
    name String Name for the input element.
    value any Value for the radio button.
    onChange Function Callback function that will be invoked when the value changes.

    RadioGroup

    Name Type Default Description
    children any Children to pass through the component.
    disabled Boolean false If true, the radio group will be displayed as disabled.
    name String Name for the input element group.
    value any The value of the radio group.
    defaultValue any The default value of the radio group.
    onChange Function Callback function that will be invoked when the value changes.

    Class Properties

    RadioButton

    Use the ref property to get a reference to radio button:

    const ref = React.createRef();
    <RadioButton ref={ref} />

    License

    MIT

    Install

    npm i @trendmicro/react-radio

    DownloadsWeekly Downloads

    510

    Version

    4.0.0-alpha

    License

    MIT

    Unpacked Size

    56.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase