react-custom-radio-buttons-group is a well designed single react component that helps you create radio-buttons group.

Installing / Getting started

This package is available in NPM repository as react-custom-radio-buttons-group. It will work correctly with all popular bundlers.

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

Using yarn

yarn add react-custom-radio-buttons-group

Include the Component

To start using react-custom-radio-buttons-group you just need to import the component RadioButtonGroup from the package.

import React from 'react';
import RadioButtonGroup from 'react-custom-radio-buttons-group';
const handleChange = (e)=>{
    doSomething(e.target.value)
}
export default () => (
  <RadioButtonGroup
    onChange={handleChange}
    hide={false}
    values={[...]}
    />
);

Documentation

RadioButtonGroup

name	description
onChange	called when select a value from values
values	Array of radio-buttons
hide	if true it hides radio button input

Values

• Values can be an array of text:

  <RadioButtonGroup
    onChange={handleChange}
    hide={false}
    values={["Apple","Banana","Orange"]}
    />

• Or a react component

  <RadioButtonGroup
    onChange={handleChange}
    hide={true}
    values={[<Especes/>,<Paypal/>,<Credit/>,<Tpe/>]}
    />

Custom styles

To edit radio-buttons default change you have to override the css properties of classes bellow:

/* radio-button default style */
  .radio-button {
}
/* radio-button active style */
.radio-button.active {
}
/* radio-button input default style */
.dot{
}
.dot::before{
}
/* radio-button input active style */
.dot.active{
}
.dot.active::before{
}