react-selector-input v0.1.3

react-selector-input

a React input component with selector and filter

Advantages

• Offer preset labels for users to input content
  Add a selector to a regular input box.Users can not only input content manually, but also select preset labels.
• Search options according to highlighted input keywords
  When users input content,react-selector-input can filter the labels in the selector based on keywords.Those keywords will also be highlighted with different color in the selector.
• Provide customized css style
  Users can determine the size of components according to their own needs.

Basic Usage

Installation

npm i react-selector-input

Import

import SelectInput from "react-selector-input";

Usage

function Example(){
    const options = [
        {
            label:'test1'
        },
        {
            label:'test2'
        },
        {
            label:'test3'
        },
        {
            label:'test4'
        },
    ]
    const  onChange = (e) => {
        console.log(e.target.value);
    }
    return (
        <div style={{display:'flex',justifyContent:'center',paddingTop:'200px'}}>
          <SelectInput placeholder={'placeholder'} width={'150px'} options={options} onChange={onChange} showClear />
        </div>

    );
}

API