<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://npmcdn.com/classnames/index.js"></script>
<script src="https://npmcdn.com/react-input-autosize/dist/react-input-autosize.js"></script>
<script src="https://npmcdn.com/react-select/dist/react-select.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/react-select/dist/react-select.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
Your example code will be loaded below:
<div id="example"></div>
<script src="script.js"></script>
</body>
</html>
function options() {
var results = [];
for (var i = 0; i < arguments.length; i++) {
results.push({value: arguments[i], label: arguments[i]});
}
return results
}
class Ctnr extends React.Component {
constructor() {
super();
this.state = {
selected: options('one', 'two long long word breaks'),
options: options('one', 'two long long word breaks', 'three', 'four', 'five')
};
}
onChange(selected) {
this.setState({selected: selected});
}
render() {
return (
<Select
name="form-field-name"
value={ this.state.selected }
options={ this.state.options }
onChange={ this.onChange.bind(this) }
multi={true}
/>
)
}
}
ReactDOM.render(
<Ctnr />,
document.getElementById('example')
);