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 |