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