• Stars
    star
    442
  • Rank 98,677 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Better radio buttons.

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:

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

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

More Repositories

1

react-motion

A spring that solves your animation problems.
JavaScript
21,680
star
2

react-tween-state

React animation.
JavaScript
1,742
star
3

react-treeview

Easy, light, flexible tree view made with React.
JavaScript
1,086
star
4

node-huxley

Codeless front-end testing.
JavaScript
365
star
5

react-state-stream

React animation on steroid.
JavaScript
361
star
6

chenglou.github.io

HTML
338
star
7

RCSS

Turn your JavaScript objects into CSS classes.
JavaScript
286
star
8

intro-to-reason-compilation

Ready up!
Shell
269
star
9

react-spinner

Zero configuration loading spinner.
JavaScript
186
star
10

tween-functions

Robert Penner's easing functions, slightly modified
JavaScript
182
star
11

data-structures

Fast, light and hassle-free JavaScript data structures, written in CoffeeScript.
JavaScript
147
star
12

pure-css-shaders-art

At the intersection of art and bad performance
HTML
121
star
13

cards

Prototyping the UI of 2030
OCaml
109
star
14

jeason

The crappy js-to-reason converter anyone can contribute to!
OCaml
106
star
15

react-chosen

React wrapper for Chosen jQuery.
HTML
96
star
16

react-dash

React documentation source for [Dash](http://kapeli.com/dash)
JavaScript
90
star
17

require-polyfill

Make `require` work in browsers, at runtime. No code bundling needed!
JavaScript
42
star
18

reason-project-ideas

40
star
19

png-diff

Small PNG diff utility, written in pure JS for Node.
JavaScript
40
star
20

react-lights-out

Simple demo of the React framework's power and flexibility.
JavaScript
27
star
21

upgrade-reason-react

OCaml
27
star
22

png-crop

Small PNG cropping utility, written in pure JS for Node.
JavaScript
23
star
23

grunt-huxley

Grunt task for node-huxley.
JavaScript
21
star
24

jon-blow-video-outlines

Outlines for Jon Blow's YouTube videos on games, programming and more.
20
star
25

multitouch-line-art

JavaScript
17
star
26

code-snippets

Code Snippets, algorithms, etc.
CoffeeScript
13
star
27

flexbox-see

Flexbox visualizer.
JavaScript
10
star
28

react-placeholder-shim

Form placeholder for input and textarea in ie8 and 9.
JavaScript
9
star
29

huxley-example

Demo from node-huxley's README
7
star
30

shaderjoy

TypeScript
6
star
31

phone-parser

Parse the phone input into an output format of your choice. Good for formatting a user input.
JavaScript
6
star
32

flappy-2048-side-by-side

An experiment in time wasting.
CSS
5
star
33

sublime-config

My configurations for Sublime Text.
JavaScript
4
star
34

the-game

yada yada
JavaScript
3
star
35

valid-css-props

Check for the validity of a CSS property name.
JavaScript
3
star
36

flip-it.safariextension

Flipboard Safari extension for adding a stuff on the web to your personal magazine.
CoffeeScript
3
star
37

l-system

Fun experiment in pattern generation, with a visualizer.
JavaScript
3
star
38

ocaml-bench

OCaml
3
star
39

bootstrap-everywhere.safariextension

Safari extension for turning websites more Californian
JavaScript
2
star
40

elastic

Something something OCaml
OCaml
2
star
41

mememe

OCaml
1
star
42

super-spy

JavaScript
1
star
43

reasonable

JavaScript
1
star
44

chalk-time

JavaScript
1
star