list

React-based list with selectable and navigable items

Nov 12, 2018
React-based list with selectable and navigable items

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 demo Download Source

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

GitHub

Recommended