react-radio-input
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published
React-radio-group

Radio buttons the proper (React) way.

npm


This package is a re-take on react-radio-group by Cheng Lou, but written using TypeScript and the ”new” Context API introduced in React 16.3.0.

Installation

$ npm i react-radio-input

// or…

$ yarn add react-radio-input

Basic usage

import { useState } from 'react';
import { RadioGroup, Radio } from 'react-radio-input';

const ExampleComponent = () => {
  const initialValue = 'apple';
  const [selectedFruit, setSelectedFruit] = useState(initialValue);

  return (
    <RadioGroup
      name="favoriteFruit"
      onChange={setSelectedFruit}
      selectedValue={selectedFruit}
    >
      <label htmlFor="bananaOption">
        <Radio id="bananaOption" value="banana" />
        Bananas
      </label>
      <label htmlFor="appleOption">
        <Radio id="appleOption" value="apple" />
        Apples
      </label>
      <label htmlFor="orangeOption">
        <Radio id="orangeOption" value="orange" />
        Oranges
      </label>
    </RadioGroup>
  );
};

Open example in CodeSandbox

A few points worth mentioning:

  • Repetitive fields are either lifted onto the RadioGroup wrapper or already implicitly set on the Radio components, which themselves are rendered as native HTML <input type="radio" /> elements.
  • Because they are <input type="radio" />’s, there is no need for aria-* or role attributes to be added – the element itself provides the necessary semantic meaning for accessability features (remember the first rule of ARIA use).
  • RadioGroup by default is rendered as a fieldset HTML element. See below for ways of changing this, but I would strongly advice to consider re-styling it instead – fieldset’s job is to group several controls as well as labels in a HTML form, which is prety much what we want to do here.
  • As seen in the example, the consumer is left to provide the proper label, as seen fit. This has two consequences, by which the latter has been deemed more important than the former for this package:
    1. There’s a weee bit of work to be done for the consumer if they want an accessible solution (please do this though 🙏).
    2. The consumer has total control over how and where the label is attached to the form input.
  • I recommend to wrap wrap these components with your own implementation (with proper label-handling) and then use that in your codebase.

With useRadioGroup

If you need to get access to the provided RadioGroup context in intermediate components between your RadioGroup and Radio components, react-radio-input also provides a useRadioGroup hook:

// CustomRadio
import { styled } from '@emotion/styled';
import { Radio, useRadioGroup } from 'react-radio-input';

const RadioWrapper = styled.label(({ isSelected }) => `
  background-color: ${isSelected ? '#5a5ae8' : '#dddde1'};
`);

const CustomRadio = ({ description, label, value }) => {
  const { selectedValue } = useRadioGroup();
  const isSelected = value === selectedValue;

  return (
    <RadioWrapper isSelected={isSelected}>
      <Radio value={value} />
      {label}
      {description}
    <RadioWrapper />
  );
};
// Parent
import { useState } from 'react';
import { RadioGroup } from 'react-radio-input';
import CustomRadio from './CustomRadio';

const ExampleComponent = () => {
  const [selectedTier, setSelectedTier] = useState();

  return (
    <RadioGroup name="productTier" onChange={setSelectedTier} selectedValue={selectedTier}>
      <legend>Select the size of your side project</legend>
      <CustomRadio label="Hobby" description="1GB – $5/month" value="hobby" />
      <CustomRadio
        label="Freelancer"
        description="5GB – $10/month"
        value="freelancer"
      />
      <CustomRadio
        label="Startup"
        description="10GB – $15/month"
        value="startup"
      />
    </RadioGroup>
  );
};

Open example in CodeSandbox

API

RadioGroup

Prop Type Description
children React component | [React components]
component StringReact component Defaults to fieldset – what HTML tag/React component to use for rendering the RadioGroup.
disabled Boolean Disables all Radio’s inside the RadioGroup.
name String Unique name for the current RadioGroup – will be implicitly set on each Radio.
onChange Function Will be called with the selected value as argument whenever a radio is selected.
selectedValue String | Number | Boolean The currently selected value.

Apart from the above, any additional props to RadioGroup will be passed down to component.

Radio

Prop Type Description
disabled Boolean Disables an individual Radio.
value String | Number | Boolean Value of the Radio.

Apart from the above, any additional props to Radio will be passed down to the underlying <input type="radio" /> element.

Package Sidebar

Install

npm i react-radio-input

Weekly Downloads

17

Version

0.2.1

License

MIT

Unpacked Size

46.1 kB

Total Files

8

Last publish

Collaborators

  • eap