Dropdown Interface

A flexible generic JavaScript dropdown list component that can be attached to any element.

Motivation

I've tried a few different dropdown libraries in the past, and they all tend to have similar issues:

* They try to do too much, often leading to code bloat and the library not doing exactly what you want it to do.
* They don't often overflow correctly. If you have the dropdown inside a modal, it would be stuck inside the modal and won't overflow outside it.
* They are usually written for a particular framework, meaning you're locked to a vendor.

This library aims to implement a similar behaviour to the native dropdown provided by the operating system, except that you can style it however you want.

Getting Started

``npm 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.