react-speedselect v2.5.0

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: