react-segmented-control
v0.2.2
Published
Simple react.js component for a segmented control
Downloads
237
Readme
react-segmented-control
Simple React component for a segmented control.
Demo
Install
npm install react-segmented-control --save
or
bower install react-segmented-control --save
Example
Controlled 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});
}
});
API
Props
All props are optional except name
.
className
Class of the Component (in addition of segmented-control
).
onChange
Function called when the control is changed (value will be passed as an argument).
defaultValue or value
Use defaultValue to specify an initial value. Use value to use this component as a controlled component.
name
Name of the input.
Styles
Look at react-segmented-control.css for an idea on how to style this component.
MIT Licensed