A flexible generic JavaScript dropdown component that can be attached to any element.
npm install dropdown-interfacenpm install dropdown-interface`
Inside your code, you can require the module and instantiate it, attaching it to an element:
`
import DropdownInterface from 'dropdown-interface';
let el = document.createElement('input');
let interface = new DropdownInterface({
items: [{label: 'item 1', value: 1}, {label: 'item 2', value: 2}],
parent: el,
onItemSelected: (item) => {
console.log(item);
}
});
`
Options
Array<Object>* items - Each item has a label and value. The label is what is displayed to the user.
HTMLElement* parent - Native HTMLElement to render relatively to.
Function<Object item>* onItemSelected - Receives the item that was selected in the list.
Function<HTMLElement el, Object item>* onItemRender - Custom rendering support. Modify the element to be rendered however you want. By default it renders the label.
Function* onListShow - Triggers when list is shown, useful for changing visual styles such as arrow directions.
Function* onListHide - Triggers when list is hidden.
Methods
* toggle() - Show/hides the list.
setFocusedItem(Number* index) - Highlights the item that matches the index.
setItems(Array<Object>* items) - Update the items in the list.
* showList() - Show the list.
* hideList() - Hide the list.
handleKeyDown(KeyEvent* e) - Must be called by a wrapper component to add keyboard controls.
* destroy() - Clean up the component.
Examples
Find examples on how to integrate the dropdown interface with frameworks in the `examples`` directory.