react-list-select

A list with selectable and keyboard navigable items. Useful as a dropdown (autocomplete), right click menu, or a simple list with actions triggered on item select.

View the example.

Use:

import List from 'react-list-select'  let items = [   'Google',   'TED',   'GitHub',   'Big Think',   'Microsoft', ]  let list = (   <List     items={items}     selected={[0]}     disabled={[4]}     multiple={true}     onChange={(selected: number) => { console.log(selected) }}   /> )  ReactDOM.renderComponent(list, document.getElementById('container'))

API

.select(index)

• number index - items array index

Select an item from the list

.deselect(index)

• number index - items array index

Deselect an item from the list

.disable(index)

• number index - items array index

Disable an item from the list to be selected or focused

.enable(index)

• number index - items array index

Enable a disabled item to be focused or selected

.focusNext()

focus next item from the list

.focusPrevious()

focus previous item from the list

.focusIndex(index)

• number index - items array index

Focus an item from the list

.clear()

Reset list state

License - MIT