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.
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) }}
listItemClassName={"list--list-item-custom-classes"}
/>
)
ReactDOM.renderComponent(list, document.getElementById('container'))
For lists inside a block with overflow, you can define a function to be called when the list item change to focused and act on the node the way you want.
let example7 = <List items={e7items} onListItemReceiveFocus={(focusedIndex, element) => {
let domElement = ReactDOM.findDOMNode(element);
domElement.scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
}}/>
-
number
index - items array index
Select an item from the list
-
number
index - items array index
Deselect an item from the list
-
number
index - items array index
Disable an item from the list to be selected or focused
-
number
index - items array index
Enable a disabled item to be focused or selected
focus next item from the list
focus previous item from the list
-
number
index - items array index
Focus an item from the list
Reset list state