react-quick-select

Quick select word(s) with an inline like completion

Demo at meain.io/react-quick-select

Install

npm install --save react-quick-select

Usage

import * as React from 'react'

import QuickSelect from 'react-quick-select'

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: 0
    };
  }

  onSelect(option, index) {
    this.setState({ option: index });
  }

  render() {
    const options = [
      { value: 1, label: "one" },
      { value: 1, label: "two" },
      { value: 2, label: "three" }
    ];
    return (
      <div style={{ display: "flex" }}>
        You are number
        <QuickSelect
          options={options}
          selected={this.state.option}
          onSelect={this.onSelect.bind(this)}
        />
        .
      </div>
    );
  }
}

For a more complex example check examples

Props

|Prop|Default|| |---|---|---| |selected|0|Currently selected element| |options||List of options. An option is a dict with 'value' and 'label' as keys| |height|'200px'|Height of the popup for selection| |width||Width of the popup for selection| |renderer|(option) => {option.label}|A function which takes option and index to return a react element for options in the popup| |trigger|(option) => {option.label}|A function which takes option and index to return a react element for the trigger| |onSelect||What to do on selection. Takes option and index as args|

License

MIT © meain