Need help with react-radio-group?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

chenglou
431 Stars 77 Forks MIT License 69 Commits 16 Opened issues

Description

Better radio buttons.

Services available

!
?

Need anything else?

Contributors list

# 394
OCaml
buckles...
reasonm...
React
35 commits
# 130,826
OCaml
reasonm...
game-pr...
2d-fram...
6 commits
# 42,763
HTML
Angular
knex
Postgre...
4 commits
# 54,180
GraphQL
HTML
Django
React
3 commits
# 101,541
CSS
css3
jquery-...
2 commits
# 194,041
Shell
CSS
Babel
React
1 commit
# 14,265
JavaScr...
npm
package...
npm-scr...
1 commit
# 78,288
Webpack
HTML
CSS
atomic-...
1 commit
# 83,830
Objecti...
React N...
React
chromiu...
1 commit
# 148,419
Java
Shell
acf
Gradle
1 commit
# 52,220
React
HTML
Front e...
react-p...
1 commit

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.