React-drop-down-searcher

Customisable dropdown select for react

 Whats New

• Customizable selected dropdown color added
• Customizable tag color added

Features

• Configurable via props
• Plugin is supportable for mouse outside click
• Auto position
• Small bundle size

Installation

npm i react-drop-down-searcher

Website

Demo Npm Link

Usage

Import :

import DropDown from "react-drop-down-searcher";

and use as

<DropDown list={list} selectedList={selectedItem} toggleItem={val => toggleItem(val)} handleInputChange= {(val)=>handleInputChange(val)}/>

API

Component Props

| Prop | Type | Default | Description | | ----------------- | ----------- | ------- | ---------------------------------------------------------------------------------------------------- | | list | ArrayObject | [] | These array values will show in the dropdown | | placeholder | String | Search | Input field placeholder
| searchKey | String | Empty | Search Key for filter dropdown | | isSingle | bool | false | if true, only one value can be selected from dropdown otherwise multi value can be selected dropdown | | labelName | String | title | This value used to show which value is from the object in dropdown | | selectedlabelName | String | title | From which value from the object need to show in the taginput | | selectedList | ArrayOBject | [] | If values set, it will show those values as tag input | | tagColor | String | #0074D9 | This color is used to set the background color to selected dropdown value in the text input | | selectedDropdownColor | String | #0074D9 | This color is used to set the background color to selected index in dropdown |

Callback props

by using render props to override components some of the functionality will have to be >handled manually with a help of internal props, states and methods exposed

| Prop | Type | Default | Description | | ------------ | ---- | ------- | ------------------------------------------------------ | | toggleItem | func | | This will return the selected values from dropdwon | | inputChanged | func | | When type something from the textfiled it will trigger |

Screenshots

• Main Image

• Single Dropdown

• Multi Dropdown

License MIT