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>
);
};
A few points worth mentioning:
- Repetitive fields are either lifted onto the
RadioGroup
wrapper or already implicitly set on theRadio
components, which themselves are rendered as native HTML<input type="radio" />
elements. - Because they are
<input type="radio" />
’s, there is no need foraria-*
orrole
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 afieldset
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:
- There’s a weee bit of work to be done for the consumer if they want an accessible solution (please do this though
🙏 ). - The consumer has total control over how and where the label is attached to the form input.
- There’s a weee bit of work to be done for the consumer if they want an accessible solution (please do this though
- I recommend to wrap wrap these components with your own implementation (with proper label-handling) and then use that in your codebase.
useRadioGroup
With 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>
);
};
API
RadioGroup
Prop | Type | Description |
---|---|---|
children |
React component | [React components]
|
|
component |
String | React 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.