customizable-dropdown-react

Customizable React Dropdown Component

Totally customizable and light weight dropdown for react component.

npm install customizable-dropdown-react

yarn add customizable-dropdown-react

import Dropdown "customizable-dropdown-react";

<Dropdown
  list="list of the items for the drop"
  callback={this.callback_func}
/>

Props	Expected values
list	This prop can accept two types of data, i.e 1. Plain array [ "item1", "item2", ... ] 2. Array object [ { text: 'item1', href: 'url for item1' }, { text: 'item2', href: 'url for item2' }, ... ] In this case, on selecting the item from dropdown will redirect the page to the respective href.
multiselect	Boolean true: will enable the feature to multi select the items from the dropdown. by default the value is false.
focus	Function Pass the callback function on focus event of the component
keydown	Function Pass the callback function on keydown event of the component
callback	Function Returns input field value on every input change
autofocus	Boolean Will focus the dropdown input on mounting. Default value: false
disabled	Boolean Will disable the input. Default value: false
async	Boolean Will enable asynchronous loading of lists. Default value: false Note: Asynchronous loading will work by default also, but some functionality wouldn't work.
placeholder	string
containerClass	className Customize the style of the dropdown by passing custom class
inputClass	className Customize the style of the input field of the component by passing custom class
listClass	className Customize the style of the dropdown list of the component by passing custom class
loadingText	string Provide custom loading text for async loading
loadingClass	string Customize the style of the loading component by passing custom class.

The response for all the functional props i.e focus, keydown, callback is:

    {
      currentInput: '', // current input of the component
      event, // corresponding event
      multiSelect: [], // array of inputs. Present only if the prop multiselect is true
    }