React-radio-group

``
npm install react-radio-group
`

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 both, the RadioGroup and Radio component.).

What This Solves

This is your average radio buttons group:

`js



Apple
Orange
Watermelon



`

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)

`js

Apple
Orange
Watermelon

`

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.

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`

License

MIT