searchable-dropdown-react

Searchable Dropdown

A customizable searchable dropdown package for enhancing user interfaces.

Installation

npm install searchable-dropdown

How it will look

Here's an image:

Usage

<DropDown
        data={[{id: 1, label: '1', value: 1}, {id: 2, label: '2', value: 2}]}
        selectedOption={selectedValue}
        handleOptionChange={(selected) => {
          setSelectedValue(selected)
        }}
        selectedElement={(option) => <div>
          {option.label}
        </div>}
        childElement={(element) => <>
          <span>{element.label}</span></>}
        selectorClass={'form3-selector'}
        childClass={'form3-child'}
      />

Component props

Prop	Type	Default	Description
selectedOption	object	{}	Selected value
handleOptionChange	callback function	(selected) => {}	Going to be called as any option selected
data	array	[]	Should be data to show, ex: [{id: 1, label: '1', value: 1}]
childElement	<></>	<></>	Customised child element of dropdown, so you can do as you want, you will get callback of option so you can use
selectedElement	<></>	<></>	Customised selected element of dropdown, so you can do as you want, you will get callback of option so you can use
selectorClass	class-name	class-name	Customised selector class to be applied on selected element wrapper
childClass	class-name	class-name	Customised child class to be applied on child element wrapper
placeholder	string	''	Placeholder to be shown if nothing is passed as selected
enableSearch	boolean	false	For enable searching
debouce	function	()=>{}	Lookup on search function

Contributing

We welcome contributions! Please follow these guidelines:

• Fork the repository.
• Create a new branch for your feature or bug fix.
• Make your changes and test thoroughly.
• Submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.