MENU


Select Box


import {useSelect} from 'downshift';const items = ['apple','apricot','pear','orange','grape','banana'];export default function App() {
  const {isOpen, selectedItem, getToggleButtonProps, getLabelProps, getMenuProps,
    highlightedIndex, getItemProps} = useSelect({items})
  return (<div><label {...getLabelProps()}>Choose an element:</label>
    <button type="button" {...getToggleButtonProps()}>
      {selectedItem || 'Elements'}
    </button>
    <ul {...getMenuProps()}>
      {isOpen && items.map((item, index) => (
          <li
            style={highlightedIndex ===index?{backgroundColor: '#bde4ff'} : {}}
            key={`${item}${index}`} {...getItemProps({item, index})}>
            {item}
          </li>))}
    </ul>
  </div>);}