A formsy-react wrapper around React Select (ES6)

Select.js

import React from 'react';
import Formsy from 'formsy-react';
import ReactSelect from 'react-select';

import './Select.less';

const Select = React.createClass({

  mixins: [Formsy.Mixin],

  propTypes: {
    id: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired,
    multiple: React.PropTypes.bool,
    options: React.PropTypes.array.isRequired
  },

  changeValue(value, selectedOptions) {
    if (this.props.multiple) {
      this.setValue(selectedOptions.map(option => option.value));
    } else {
      this.setValue(value);
    }
  },

  render() {
    var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;

    var errorMessage = this.getErrorMessage();

    return (
      <div className={'form-group' + (className ? ' ' + className : '') }>
        <label htmlFor={this.props.id}>{this.props.title}</label>
        <ReactSelect
          ref="select"
          id={this.props.id}
          name={this.props.name}
          multi={this.props.multiple}
          onChange={this.changeValue}
          value={this.getValue()}
          options={this.props.options}
          />
        <span className='error-message'>{errorMessage}</span>
      </div>
    );
  }
});

export default Select;

this was super useful and saved a ton fo work! thanks a lot!!

Hell yeah! Thanks

I know it's been a while... but here's one with the {...this.props} spread operator so that you can use any of ReactSelect's options on your component: https://gist.github.com/JulienMelissas/f383d64243acba7c675935180ccc29f0