react-segmented-control

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