kevinrademan / react-list-select

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 - example

Use:

var List = require('react-list-select')

var items = [
  'Google',
  'TED',
  'GitHub',
  'Big Think',
  'Microsoft',
]

var list = <List items={items}
  selected={[0]}
  disabled={[4]}
  multiple={true}
  onChange={function (selected) { }} />

React.renderComponent(list, document.body)

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

.focusItem({next, previous, index})

• value
  • index 3 - items array index
  • boolean next - focus next item from the list
  • boolean previous - focus previous item from the list

Focus an item from the list

.clear()

Reset list state

License - MIT