preact-radio-group

4.2.0 • Public • Published

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 4.2.0
    78
    • latest
  • 3.1.0
    0
    • next

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 4.2.0
    78
  • 4.1.0
    10
  • 3.1.0
    0
  • 4.0.0
    0
  • 3.0.2
    0

Package Sidebar

Install

npm i preact-radio-group

Weekly Downloads

88

Version

4.2.0

License

MIT

Unpacked Size

87.7 kB

Total Files

8

Last publish

Collaborators

  • vpzomtrrfrt
  • vpzom