Skip to content

Instantly share code, notes, and snippets.

@keeth
Last active Dec 29, 2017
Embed
What would you like to do?
A formsy-react wrapper around React Select (ES6)
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;
@keown

This comment has been minimized.

Copy link

@keown keown commented Jun 23, 2016

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

@kesha-antonov

This comment has been minimized.

Copy link

@kesha-antonov kesha-antonov commented Jul 13, 2016

Hell yeah! Thanks

@JulienMelissas

This comment has been minimized.

Copy link

@JulienMelissas JulienMelissas commented Sep 6, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment