@trendmicro/react-radio-button

React Radio component

Showing:

Popularity

Downloads/wk

1

GitHub Stars

11

Maintenance

Last Commit

2yrs ago

Contributors

3

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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
    
  2. 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

NameTypeDefaultDescription
childrenanyChildren to pass through the component.
classNameObjectCustomized class name for the component.
styleObjectCustomized style for the component.
checkedBooleanIf true, the radio button will be selected. Transferred from the radio group.
defaultCheckedBooleanThe default checked state of the radio button.
disabledBooleanfalseIf true, the radio button will be shown as disabled and cannot be modified.
tagFunction or StringlabelCustomized wrapper component to replace label.
idStringId for the input field of radio button.
nameStringName for the input element.
valueanyValue for the radio button.
onChangeFunctionCallback function that will be invoked when the value changes.

RadioGroup

NameTypeDefaultDescription
childrenanyChildren to pass through the component.
disabledBooleanfalseIf true, the radio group will be displayed as disabled.
nameStringName for the input element group.
valueanyThe value of the radio group.
defaultValueanyThe default value of the radio group.
onChangeFunctionCallback 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial