Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chenglou/react-radio-group
Better radio buttons.
https://github.com/chenglou/react-radio-group
Last synced: 6 days ago
JSON representation
Better radio buttons.
- Host: GitHub
- URL: https://github.com/chenglou/react-radio-group
- Owner: chenglou
- License: mit
- Created: 2013-07-27T03:02:51.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-11-13T14:12:13.000Z (about 1 year ago)
- Last Synced: 2024-04-14T02:26:30.014Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 442
- Watchers: 9
- Forks: 76
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-radio-group - Better radio buttons. (Uncategorized / Uncategorized)
- awesome-react-components - react-radio-group - Better radio buttons. (UI Components / Form Components)
- awesome-react - react-radio-group - Better radio buttons. ![](https://img.shields.io/github/stars/chenglou/react-radio-group.svg?style=social&label=Star) (UI Components / Form Components)
- awesome-list - react-radio-group - Better radio buttons. (Demos / Form Components)
- awesome-react-components - react-radio-group - Better radio buttons. (UI Components / Form Components)
- awesome-react-components - react-radio-group - Better radio buttons. (UI Components / Form Components)
- awesome-react-components - react-radio-group - Better radio buttons. (UI Components / Form Components)
- fucking-awesome-react-components - react-radio-group - Better radio buttons. (UI Components / Form Components)
README
# [React](http://facebook.github.io/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](https://github.com/chenglou/react-radio-group/blob/67a2bcdc7f3d0c8cb4d7762f82558d75c9592ea9/example/example.jsx))
```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](https://github.com/chenglou/react-radio-group/blob/67a2bcdc7f3d0c8cb4d7762f82558d75c9592ea9/index.jsx#L34-L46):
- `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](./LICENSE)