Simple React component for a segmented control.
npm install react-segmented-control --saveor
bower install react-segmented-control --saveControlled usage:
var SegmentedControl = require('react-segmented-control');
var App = React.createClass({
getInitialState() {
return {
color: 'red'
};
},
render() {
return (
<div>
<SegmentedControl
onChange={this.colorUpdated}
value={this.state.color}
name="color">
<span value="red">Red</span>
<span value="blue">Blue</span>
</SegmentedControl>
<div className='background' style={{background: this.state.color}} />
</div>
);
},
colorUpdated(value) {
this.setState({color: value});
}
});All props are optional except name.
Class of the Component (in addition of segmented-control).
Function called when the control is changed (value will be passed as an argument).
Use defaultValue to specify an initial value. Use value to use this component as a controlled component.
Name of the input.
Look at react-segmented-control.css for an idea on how to style this component.
MIT Licensed