React-custom-radio NPM

React-custom-radio

This is fork of this awesome repository.

npm install react-custom-radio --save

Then either import {RadioGroup, Radio} from 'react-radio-group' or add node_modules/react-radio-group/umd/index.js into your HTML file (exports the RadioGroup global which contains: RadioGroup, Radio and RadioButton components.).

What This Solves

This is your average radio buttons group:

<form>
  <input type="radio" name="fruit" value="apple" />Apple
  <input type="radio" name="fruit" value="orange" />Orange
  <input type="radio" name="fruit" value="watermelon" />Watermelon
</form>

A few problems:

Repetitive fields (name, type, checked, onChange).
Hard to set the checked value. You need to put e.g. checked={'apple' === this.state.selectedFruitName} on every input.
Hard to retrieve the selected value.

Here's a better version (full example here)

<RadioGroup name="fruit" selectedValue={this.state.selectedValue} onChange={this.handleChange}>
  <Radio value="apple" />Apple
  <Radio value="orange" />Orange
  <Radio value="watermelon" />Watermelon
</RadioGroup>

Repetitive fields are either lifted onto the RadioGroup wrapper or already implicitly set on the Radio component, which is a simple wrapper around the radio input.

Customize your radio with \ elements

This library also provide simple interface to customize your buttons with:

<RadioGroup
    name="car"
    selectedValue={this.state.selectedCar}
    onChange={this.handleCarChange}
>
    <RadioButton value="BMW" className="radio-button">
        BMW
    </RadioButton>
    <RadioButton value="Mercedes" className="radio-button">
        Mercedes-Benz
    </RadioButton>
    <RadioButton value="Porsche" className="radio-button">
        Porsche
    </RadioButton>
</RadioGroup>

This example will create few <button> elements and all of them will work as default radio elements. If you want to use <input> elements both with <button> you will need to provide useHiddenInput to RadioButton component.

For details see example

Formal API

<RadioGroup />

Exposes 5 optional props:

name: String: what you'd normally put on the radio inputs themselves.
selectedValue: String | Number | Boolean: the currently selected value. This will be used to compare against the values on the Radio components to select the right one.
onChange: Function: will be passed the newly selected value.
Component: String | React Component: defaults to "div", defines what tag or component is used for rendering the RadioGroup
children: Node: define your Radios and any other components. Each Radio component (a thin wrapper around input) within a RadioGroup will have some fields like type, name and checked prefilled.

<Radio />

Any prop you pass onto it will be transferred to the actual input under the hood. Radio components cannot be used outside a RadioGroup

<RadioButton />

Exposes 3 optional props:

useHiddenInput: Boolean: if you need to use input
className: String: base class name for button. If current button is active active class will be added to value of this prop (default - empty)
type: type of button element. Default - button
Any other prop you pass onto it will be transferred to actual button under the hood. RadioButton components cannot be used outside a RadioGroup.