1.0.1 • Published 7 months ago
searchable-dropdown-react v1.0.1
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.
1.0.1
7 months ago