react-radio-group

by chenglou

Better radio buttons.

423 Stars 76 Forks Last release: almost 5 years ago (v2.2.0) MIT License 69 Commits 14 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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:


  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)

  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
Radio
s 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.