react-radio-button
How to install:
npm install react-radio-buttonExample:
Usage:
import React, { Component, PropTypes } from 'react';
import RadioButtonGroup from 'react-radio-button';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedValue: undefined,
radioOptions: [
{ value: 'CreditCard', text: 'Credit Card' },
{ value: 'DebitCard', text: 'Debit Card'}
]
};
}
handleSelection(value) {
this.setState({selectedValue: value});
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-12">
<h2> Welcome for the radio button example</h2>
</div>
<div className="col-xs-12">
<RadioButtonGroup listOfItems={this.state.radioOptions} selectedItemCallback={(value) => this.handleSelection(value)}/>
</div>
<div className="col-xs-12">
<h4>Selected radio button: <i>{this.state.selectedValue}</i></h4>
</div>
</div>
</div>
);
}
}###props to the <RadioButtonGroup listOfItems={<items>} selectedItemCallback={callbck} />
###listOfItems (PropTypes.array):
The items that need to appear on the radio items, is in the format (array):
javascript radioOptions: [ { value: 'CreditCard', text: 'Credit Card' }, { value: 'DebitCard', text: 'Debit Card'} ]
where,
value is the value we get on radio button selection
text is the display of the radio button
###selectedItemCallback (PropTypes.func)
The callback that is invoked when a radio button is clicked (function):
(value) => handleSelection(value)
where,
handleSelection(value) { //value is the selected value, like "CreditCard" or "DebitCard"
this.setState({selectedValue: value});
}##Customing button colors (The default colors are shown below):
Add these to your custom css file and should be ideally changing the color for which ever color scheme you use.
###With not selected state:
.not-checked {
background-color: #ffffff !important;
border-color: #ccc !important;
}###With selected state:
.checked {
background-color: #7d9c47 !important;
}
.radio-button-item > input[type="radio"]:checked+span:after {
background-color: #426C2A !important;
}
.radio-button-item > input[type="radio"]:checked+span+span{
color: #fff !important;
}###On hover, the color to change:
.radio-button-item:hover .radio-dot:before {
border-color: #bdde85 !important;
}
.radio-button-item:hover .radio-dot:after {
background-color: #bef65b !important;
}Once added to a custom css file (example: test.css), do import the same as:
import React, { Component, PropTypes } from 'react';
import RadioButtonGroup from '~/components/RadioButtonGroup';
import './test.css' // Relative path
