Package Exports

customizable-dropdown-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (customizable-dropdown-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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
    }