React-radio-group-context NPM

react-radio-group-context

Radio Group Component for React written with the new Context API 😮

In order to use this component, you must use React 16.3 or above. Older versions of React do not implement the Context API that this library depends on.

Why?

RadioGroup in react is one the most annoying components that a web developer has to deal with it. A possible implementation without using Context could be like this:

import React, { Component } from 'react';

class Example extends Component {
  state = {
    selectedFruit: 'apple',
  };

  onChangeFruit = ({ target: { value } }) =>
    this.setState({ selectedFruit: value });

  render() {
    return (
      <div>
        <label>
          <input
            type="radio"
            value="apple"
            id="apple"
            name="fruits"
            onChange={this.onChangeFruit}
            checked={this.state.selectedFruit === 'apple'}
          />
          Apple
        </label>
        <br />
        <label>
          <input
            type="radio"
            value="grapes"
            id="grapes"
            name="fruits"
            onChange={this.onChangeFruit}
            checked={this.state.selectedFruit === 'grapes'}
          />
          Grapes
        </label>
        <br />
        <label>
          <input
            type="radio"
            value="orange"
            id="orange"
            name="fruits"
            onChange={this.onChangeFruit}
            checked={this.state.selectedFruit === 'orange'}
          />
          Orange
        </label>
        <br />
      </div>
    );
  }
}

That's a lot of code just to create a radio group in React! Time to see how we can do the same but with Context!

Install

yarn add react-radio-group-context

Usage

Controlled Component

import React, { Component } from 'react';
import { RadioButton, RadioGroup } from 'react-radio-group-context';

class Example extends Component {
  state = {
    selectedFruit: 'apple',
  };

  onChangeFruit = ({ target: { value } }) =>
    this.setState({ selectedFruit: value });

  render() {
    return (
      <RadioGroup
        name="fruits"
        selected={this.state.selectedFruit}
        onChange={this.onChangeFruit}
      >
        <RadioButton id="apple">Apple</RadioButton> <br />
        <RadioButton id="grapes">Grapes</RadioButton> <br />
        <RadioButton id="orange">Orange</RadioButton> <br />
      </RadioGroup>
    );
  }
}

Uncontrolled Component

import React, { Component } from 'react';
import { RadioButton, RadioGroup } from 'react-radio-group-context';

const Example = () => (
  <RadioGroup name="fruits">
    <RadioButton id="apple">Apple</RadioButton> <br />
    <RadioButton id="grapes">Grapes</RadioButton> <br />
    <RadioButton id="orange">Orange</RadioButton> <br />
  </RadioGroup>
);

Label Position

import React, { Component } from 'react';
import { RadioButton, RadioGroup } from 'react-radio-group-context';

const GroupLabelBefore = () => (
  <RadioGroup name="fruits" labelPosition="before">
    <RadioButton id="apple">Apple</RadioButton> <br />
    <RadioButton id="grapes">Grapes</RadioButton> <br />
    <RadioButton id="orange">Orange</RadioButton> <br />
  </RadioGroup>
);

const ItemsLabelBefore = () => (
  <RadioGroup name="fruits">
    <RadioButton id="apple" labelPosition="before">Apple</RadioButton> <br />
    <RadioButton id="grapes">Grapes</RadioButton> <br />
    <RadioButton id="orange" labelPosition="before">Orange</RadioButton> <br />
  </RadioGroup>
);

Disabling

import React, { Component } from 'react';
import { RadioButton, RadioGroup } from 'react-radio-group-context';

const GroupDisabled = () => (
  <RadioGroup name="fruits" disabled>
    <RadioButton id="apple">Apple</RadioButton> <br />
    <RadioButton id="grapes">Grapes</RadioButton> <br />
    <RadioButton id="orange">Orange</RadioButton> <br />
  </RadioGroup>
);

const ItemsDisabled = () => (
  <RadioGroup name="fruits">
    <RadioButton id="apple" disabled>Apple</RadioButton> <br />
    <RadioButton id="grapes">Grapes</RadioButton> <br />
    <RadioButton id="orange">Orange</RadioButton> <br />
  </RadioGroup>
);

For more examples please check the Storybook