README.md

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

  Demo Gif

---

Contact Me

License MIT