React-drop-down-searcher NPM

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