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

    2.0.0 • Public • Published

    React Radio Context

    This package is intended to make your life easier when working with <input type="radio" /> in React. It provides a <RadioGroup /> wrapper component and a <Radio /> component that can be used inside of a RadioGroup wrapper. Instead of having to manage the state by yourself the RadioGroup component takes care of that.

    Installation

    npm install react-radio-context
    

    or

    yarn add react-radio-context
    

    Example

    What does react-radio-context do and how does it do that?

    This is your average radio group:

    const FruitSelector = () => {
        const [fruit, setFruit] = React.useState();
        const handleFruitChange = (e) => {
            const {
                target: { value },
            } = e;
    
            setFruit(value);
        };
    
        return (
            <form>
                <input
                    onChange={handleFruitChange}
                    type="radio"
                    name="fruit"
                    value="apple"
                    checked={fruit === 'apple'}
                />{' '}
                Apple
                <input
                    onChange={handleFruitChange}
                    type="radio"
                    name="fruit"
                    value="orange"
                    checked={fruit === 'orange'}
                /> Orange
                <input
                    onChange={handleFruitChange}
                    type="radio"
                    name="fruit"
                    value="watermelon"
                    checked={fruit === 'watermelon'}
                />{' '}
                Watermelon
            </form>
        );
    };

    Repetitive, hard to manipulate and easily desynchronized. Lift up name and onChange, and (optionally) give the group an initially selectedValue:

    import { Radio, RadioGroup } from 'react-radio-context';
    
    const FruitSelector = () => (
        <RadioGroup name="fruits" selectedValue="pineapple">
            <Radio value="kiwi" /> Kiwi
            <Radio value="pineapple" /> Pineapple
            <Radio value="watermelon" /> Watermelon
        </RadioGroup>
    );

    Since this component uses React's Context API, <Radio> elements can by anywhere inside of a <RadioGroup> and they do not have to be a direct descendant. You can also define a custom onChange handler which is called after the state was updated and receives the Event object and the new value as its parameters.

    <RadioGroup
        name="frameworks"
        onChange={(event, newValue) => {
            console.log(newValue);
        }}
    >
        <p>
            <label htmlFor="react">
                <Radio value="react" id="react" /> React
            </label>
        </p>
        <p>
            <label htmlFor="vue">
                <Radio value="vue" id="vue" /> Vue
            </label>
        </p>
    </RadioGroup>

    Components

    <RadioGroup />

    Prop Type Description
    onChange (event: React.ChangeEvent<HTMLInputElement>, value: string) => void Will be called on every time a radio changes its state.
    name string Name for all radioes within one <RadioGroup>
    value string Value of the currently selected <Radio> element`

    <Radio />

    The Radio component passes all of its props the the underlying <input type="radio" /> element. All valid HTML attributes can be used with the exception of checked, name, onChange as they will be set by the parent <RadioGroup> component.

    Todo

    • Add comprehensive tests

    License

    MIT.

    Keywords

    none

    Install

    npm i react-radio-context

    DownloadsWeekly Downloads

    545

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    11 kB

    Total Files

    4

    Last publish

    Collaborators

    • manuelbieh