react-selector-input

0.1.3 • Public • Published

react-selector-input

npm license

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

Readme

Keywords

Package Sidebar

Install

npm i react-selector-input

Weekly Downloads

1

Version

0.1.3

License

MIT

Unpacked Size

16.2 kB

Total Files

12

Last publish

Collaborators

  • swelldg