Multi Select React – A React Component providing multi select and single select functionality.
npm install multi-select-react----
npm install multi-select-react
----
Demo
Multi-select-react----
1. Basic Usage
js
import React, { Component } from 'react';
import MultiSelectReact from 'multi-select-react';class MyComponent extends Component {
constructor() {
super();
this.state = {
multiSelect: []
};
}
render() {
const selectedOptionsStyles = {
color: "#3c763d",
backgroundColor: "#dff0d8"
};
const optionsListStyles = {
backgroundColor: "#dff0d8",
color: "#3c763d"
};
return (
optionClicked={this.optionClicked.bind(this)}
selectedBadgeClicked={this.selectedBadgeClicked.bind(this)}
selectedOptionsStyles={selectedOptionsStyles}
optionsListStyles={optionsListStyles} />
);
}
optionClicked(optionsList) {
this.setState({ multiSelect: optionsList });
}
selectedBadgeClicked(optionsList) {
this.setState({ multiSelect: optionsList });
}
}
`2. Single Select
js
import React, { Component } from 'react';
import MultiSelectReact from 'multi-select-react';class MyComponent extends Component {
constructor() {
super();
this.state = {
multiSelect: []
};
}
render() {
const selectedOptionsStyles = {
color: "#3c763d",
backgroundColor: "#dff0d8"
};
const optionsListStyles = {
backgroundColor: "#dff0d8",
color: "#3c763d"
};
return (
optionClicked={this.optionClicked.bind(this)}
selectedBadgeClicked={this.selectedBadgeClicked.bind(this)}
selectedOptionsStyles={selectedOptionsStyles}
optionsListStyles={optionsListStyles}
isSingleSelect={true} />
);
}
optionClicked(optionsList) {
this.setState({ multiSelect: optionsList });
}
selectedBadgeClicked(optionsList) {
this.setState({ multiSelect: optionsList });
}
}
`
Default value for isSingleSelect is false, for using this component as normal single select component set isSingleSelect to true.
3. Text Wrap
js
import React, { Component } from 'react';
import MultiSelectReact from 'multi-select-react';class MyComponent extends Component {
constructor() {
super();
this.state = {
multiSelect: []
};
}
render() {
const selectedOptionsStyles = {
color: "#3c763d",
backgroundColor: "#dff0d8"
};
const optionsListStyles = {
backgroundColor: "#dff0d8",
color: "#3c763d"
};
return (
optionClicked={this.optionClicked.bind(this)}
selectedBadgeClicked={this.selectedBadgeClicked.bind(this)}
selectedOptionsStyles={selectedOptionsStyles}
optionsListStyles={optionsListStyles}
isTextWrap={true} />
);
}
optionClicked(optionsList) {
this.setState({ multiSelect: optionsList });
}
selectedBadgeClicked(optionsList) {
this.setState({ multiSelect: optionsList });
}
}
`
Default value for isTextWarp is true, for component to grow vertically and display all options selected set isTextWarp to false.----
Props
| Prop | Type | Default | Description |
|:--------- | :---- | :---- |:---- |
|
| object | {} | CSS for MultiSelect options selected badges
| optionsListStyles | object | {} | CSS for MultiSelect options drop down
| options | array | R | Options to be pre-populated in select
| optionClicked | function | R | Callback, invoked after an option is clicked
| selectedBadgeClicked | function | R | Callback, invoked after an selected option badge
| isSingleSelect | boolean | Optional | Boolean value for single select functionality, component's default behavior is multi select
| isTextWrap | boolean` | Optional | Boolean value for text wrap i.e selected option will expand horizontally[MIT]