README.md

React Select Box

An accessible select box component for React.

Demo

http://instructure-react.github.io/react-select-box/

Installation

$ npm install react-select-box --save

Usage

To add a single select box:

import React from 'react';
import SelectBox from 'react-select-box';

var option = React.createElement.bind(null, 'option');

export default class Example extends React.Component {

	constructor() {
		super();
		this.state = {
			color: null
		};
	}
	
	handleChange(color) {
		this.setState({color});
	}
	
	render() {
		return (
			<div>
				<SelectBox label="Favorite Color" onChange={this.handleChange.bind(this)} value={this.state.color}>
					<option value={'red'}>Red</option>
					<option value={'green'}>Green</option>
					<option value={'blue'}>Blue</option>
				</SelectBox>
			</div>
		);
	}

}

To add a multi select box:

import React from 'react';
import SelectBox from 'react-select-box';

var option = React.createElement.bind(null, 'option');

export default class Example extends React.Component {

	constructor() {
		super();
		this.state = {
			colors: []
		};
	}
	
	handleMultiChange(colors) {
		this.setState({colors});
	}
	
	render() {
		return (
			<div>
				<SelectBox label="Favorite Colors" onChange={this.handleMultiChange.bind(this)} value={this.state.colors} multiple={true}>
					<option value={'red'}>Red</option>
					<option value={'green'}>Green</option>
					<option value={'blue'}>Blue</option>
				</SelectBox>
			</div>
		);
	}

}

Development

$ git clone [email protected]:instructure/react-select-box.git
$ npm install

Run the tests

$ npm test

Start the dev server

$ PORT=4000 npm start

Defaults to port 1337 if no port env variable is set.