|
- Introduction | Downshift
The second solution is the Downshift component, which can also be used to create accessible combobox and select components, providing the logic in the form of a render prop It served as inspiration for developing the hooks and it has been around for a while
- useCombobox - Downshift
It also contains the changes proposed by Downshift that should occur as a consequence of that change type You are supposed to return the new state according to your needs In the example below, let's say we want to show input characters uppercased all the time
- useMultipleSelection | Downshift
The props are similar to the ones provided by vanilla Downshift to the children render prop These props are called getter props and their return values are destructured as a set of ARIA attributes and event listeners
- useSelect - Downshift
Controlling state is possible by receiving the state changes handled by Downshift via onChange props (onHighlightedIndexChange, onSelectedItemChange etc ), changing data based on your requirements, and passing the data back to Downshift via props, for instance highlightedIndex or selectedItem
- Hooks - Downshift
Downshift Hooks Every React hook offers custom logic to build the kind of dropdown you need If you need to build a combobox then use useCombobox However, if you don't need to type a search query and just have a dropdown that is actioned by a button (a select, basically), then use useSelect
|
|
|