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

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | placeholder | string | - | Placeholder in input box | | onChange | function | - | Callback function when input content is changed | | width | string | '150px' | Width of the input box | | showClear | boolean | false | Whether show delete button which can remove the input content | | disabled | boolean | false | Whether the input is disabled | | defaultValue | string | - | Default value of the input box | | options | {label}[] | - | Content of select list | | listHeight | string | auto | Height of select list | | inputPadding | string | '6px 20px 6px 10px' | Padding of input box | | listPadding | string | '6px' | Padding of select list | | inputFontSize | string | '14px' | Fontsize of input box | | listFontSize | string | '14px' | Fontsize of select list |