react-speedselect

SpeedSelect

The Single/Multiple Select control for React. Initially built to use in internal project of bydata applications. It is powerful React.js component that just work out of the box, while being extremely customisable.

Single/Multi Select Box Features include:

---

• include icons in option
• include/exclude search
• show prominent label
• make label clickable
• dropdown alignment
• display as options with sub options

Installation and usage

---

Use it in your app:

import React from 'react';
import  SpeedSelect  from 'react-speedselect';

//Select options
var optionsArr = [
  { id: "option1", name: "Option 1", url: 'icon_url_or_html_code', info:"option 1 info" },
  { id: "option2", name: "Option 2", url: 'icon_url_or_html_code', info:"option 2 info" },
  { id: "option3", name: "Option 3", url: 'icon_url_or_html_code', info:"option 3 info" },
  { id: "option4", name: "Option 4", url: 'icon_url_or_html_code', info:"option 4 info" },
  { id: "option5", name: "Option 5", url: 'icon_url_or_html_code', info:"option 5 info" }
];


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [],
      selectedOptionSingle: null,
      selectedOptionMultiple: [],
    };

    this.onOptionSelectSingle = this.onOptionSelectSingle.bind(this); // single select event bind
    this.onOptionSelectMultiple = this.onOptionSelectMultiple.bind(this); // multi select event bind
  }

  componentDidMount() {
    // fetch options and selectedOptions from some API
    setTimeout(() => {
      this.setState({
        options: optionsArr,
        selectedOption: []
      });
    }, 2000);
  }

  // Used for singl select box on select event
  onOptionSelectSingle(selectedOption) {
    this.setState({
      selectedOptionSingle: selectedOption
    });
  }

  // Used for singl select box on select event
  onOptionSelectMultiple(selectedOption) {
    this.setState({
      selectedOptionMultiple: selectedOption
    });
  }

  render() {
    return (
      <div className="App">
        <div className="select-wrapper">
            <SpeedSelect
              options={optionsArr}
              selectedOption={this.state.selectedOptionMultiple}
              onSelect={this.onOptionSelectMultiple}
              displayKey='name'
              uniqueKey='id'
              imgKey='url'
              multiple
              showSelectionsInChipForm={true}
              selectionWrapperMaxHeight={100}
              selectLabel='Select Vehicles'
              prominentLabel='Vehicels'
              searchPlaceholder='Search Vehicle here ...'
              createNewOptionWhenNotMatched={true} 
              disabledOptions={this.state.disabledOptions}
              dropdownAlignment='left'
            />
        </div>
      </div>
    );
  }
}

Props

---

Common props you may want to specify include:

Prop	Prop Type	Input Type	Info
showInlineDropDown	optional	boolean	Default=false
options	required	array/array of objects
selectedOption	required	array/array of objects
onSelect	required	()=>{}	function (to handle on select event)
displayKey	required	string	if options is an array of objects
uniqueKey	required	string	if options is an array of objects
imgKey	optional	string	used to show the img in front of each option
multiple	optional	boolean	just write "multiple" without giving any value for multiselect
showSelectionsInChipForm	optional	boolean	Default=false
selectionWrapperMaxHeight	optional	number	Default auto; Max height for selection chip container
maxSelectionLimit	optional	number	Default='No Limit'
hideOkCancelBtns	optional	boolean	Default=false
selectLabel	optional	string	Default=false; It is always visible in case of multiple and visible
disableSearch	optional	boolean	Default=false
searchPlaceholder	optional	string	Default='Search'
createNewOptionWhenNotMatched	optional	boolean	Default=false; New option can be created when no match is found on search
disable	optional	boolean	Default=false
disabledOptions	optional	array	Default=[]
maxHeight	optional	number	Default='450' (in pixel)
dropdownAlignment	optional	options ('left' or 'right')	fixed options left/right
dropdownSelectAllLabel	optional	boolean	Default=false
optionsLegendColors	optional	array e.g. ['red', 'green', 'blue']	Default=null
optionsColorPos	optional	string	Default=left
showLegendColorAsSelectedVal	optional	boolean	Default=false
prominentLabel	optional	string	e.g. 'Country'
isLabelClickable	optional	boolean	Default=false
dropdownStatus	callback function		provides option to handle callback and take required action