Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-custom-radio-buttons

osama_rezk56MIT1.0.1

Simple Custom radio buttons for react applications

react, Buttons, Radio Buttons, Un Controlled, radio, radio group

readme

react-custom-radio-buttons

It is a reactJs component which behave like a radio button , So ! Let's Make a Deal make a deal I Will be in charge of state and you will be in charge of rendering , see the Usage Below

npm version

Installation

npm install react-custom-radio-buttons --save

Demo

Alt Text

Usage

import React, { useState } from "react";
import { Radio, RadioGroup } from "react-custom-radio-buttons";
import "./App.css";

const options = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];

function App() {
  const [size, setSize] = useState(null);
  const onChange = option => {
    setSize(option);
  };
  return (
    <div className="App">
      <h1>Please Selct Your Size</h1>
      <RadioGroup containerStyle="options-container" onChange={onChange}>
        {options.map(option => (
          <Radio
            value={option}
            render={({ isSelected }) => (
              <button
                className="option"
                style={{
                  backgroundColor: ` ${isSelected ? "#39ab31" : "#f9d10a"} `
                }}
              >
                {option}
              </button>
            )}
          />
        ))}
      </RadioGroup>

      <h1>Your Size is {size}</h1>
    </div>
  );
}

app.css

.App {
  text-align: center;
}
.option {
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 5px;
}
.options-container {
  display: flex;
  flex-direction: row;
}

Props

1-RadioGroup

Prop name Description isRequired type
onChange Give You The Value of selected Option Yes function
containerStyle Styling The container of all radio buttons No String

2-Radio

Prop name Description isRequired type
render Render Radio Button UI Yes function
value The Value Of The Option Yes Any
disableStyle Styling The Disabled Option No Object
isDisabled Tell That Option Is Disabled No Boolean

Thank you