emasuriano / react-radio-group-context Goto Github PK

View Code? Open in Web Editor NEW

10.0 3.0 1.0 1.49 MB

Radio Group Component for React written with the new Context API

Home Page: https://emasuriano.github.io/react-radio-group-context/

JavaScript 99.41% CSS 0.59%

reactjs context radio-buttons storybook

react-radio-group-context's Introduction

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

License

MIT © EmaSuriano

react-radio-group-context's People

Contributors

Stargazers

Watchers

Forkers

singingwolfboy

react-radio-group-context's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.