Drifter
Search results
Downshift is a library that provides primitives to build simple, flexible, and accessible React autocomplete/combobox or select dropdown components. It offers a set of hooks and a render prop component with ARIA design pattern compliance.
- Downshift
Downshift Introduction The Downshift component has been...
- Hooks
Downshift Hooks. Every React hook offers custom logic to...
- useCombobox
useCombobox is a React hook that manages all the stateful...
- useSelect
Controlling state . Controlling state is possible by...
- useMultipleSelection
The props are similar to the ones provided by vanilla...
- Downshift
- Overview
- The problem
- This solution
- Table of Contents
- Installation
- Usage
- Basic Props
- Advanced Props
- stateChangeTypes
- Control Props
- GeneratedCaptionsTabForHeroSec
Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
You need an autocomplete, a combobox or a select experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases. Finally, it should follow the ARIA design pattern for a combobox or a select, depending on your use case.
The library offers a couple of solutions. The first solution, which is the one we recommend you to try first, is a set of React hooks. Each hook provides the stateful logic needed to make the corresponding component functional and accessible. Navigate to the documentation for each by using the links in the list below.
•useSelect for a custom select component.
•useCombobox for a combobox or autocomplete input.
•useMultipleSelection for selecting multiple items in a select or a combobox, as well as deleting items from selection or navigating between the selected items.
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. It established a successful pattern for making components accessible and functional while giving developers complete freedom when building the UI.
Both useSelect and useCombobox support the latest ARIA combobox patterns for W3C, which Downshift does not. Consequently, we strongly recommend the you use the hooks. The hooks have been migrated to the ARIA 1.2 combobox pattern in the version 7 of downshift. There is a Migration Guide that documents the changes introduced in version 7.
This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:
There is also an example without getRootProps.
Downshift is the only component exposed by this package. It doesn't render anything itself, it just calls the render function and renders that. "Use a render prop!"! {downshift => /* your JSX here! */ } .
children
This is called with an object. Read more about the properties of this object in the section "Children Function".
itemToString
If your items are stored as, say, objects instead of strings, downshift still needs a string representation for each one (e.g., to set inputValue). Note: This callback must include a null check: it is invoked with null whenever the user abandons input via .
onChange
Called when the selected item changes, either by the user selecting an item or the user clearing the selection. Called with the item that was selected or null and the new state of downshift. (see onStateChange for more info on stateAndHelpers). •selectedItem: The item that was just selected. null if the selection was cleared. •stateAndHelpers: This is the same thing your children function is called with (see Children Function)
initialSelectedItem
Pass an item or an array of items that should be selected when downshift is initialized.
initialInputValue
This is the initial input value when downshift is initialized.
initialHighlightedIndex
This is the initial value to set the highlighted index to when downshift is initialized.
There are a few props that expose changes to state (onStateChange and stateReducer). For you to make the most of these APIs, it's important for you to understand why state is being changed. To accomplish this, there's a type property on the changes object you get. This type corresponds to a Downshift.stateChangeTypes property.
The list of all possible values this type property can take is defined in this file and is as follows:
•Downshift.stateChangeTypes.unknown
•Downshift.stateChangeTypes.mouseUp
•Downshift.stateChangeTypes.itemMouseEnter
•Downshift.stateChangeTypes.keyDownArrowUp
downshift manages its own state internally and calls your onChange and onStateChange handlers with any relevant changes. The state that downshift manages includes: isOpen, selectedItem, inputValue, and highlightedIndex. Your Children function (read more below) can be used to manipulate this state and can likely support many of your use cases.
However, if more control is needed, you can pass any of these pieces of state as a prop (as indicated above) and that state becomes controlled. As soon as this.props[statePropKey] !== undefined, internally, downshift will determine its state based on your prop's value rather than its own internal state. You will be required to keep the state up to date (this is where onStateChange comes in really handy), but you can also control the state from anywhere, be that state from other components, redux, react-router, or anywhere else.
downshift-js is a library that provides primitives to build simple, flexible, accessible React autocomplete, combobox or select dropdown components. It offers a set of React hooks and a Downshift component with a render prop, both following the latest ARIA patterns.
Downshift is a React component that provides accessibility and functionality to a combobox or autocomplete input. It uses a render prop and returns props and state for customization and control of the component.
useCombobox is a React hook that manages all the stateful logic needed to make the combobox functional and accessible. It returns a set of props that are meant to be called and their results destructured on the combobox's elements: its label, toggle button, input, combobox container, list and list items.
Aug 19, 2021 · Learn how to use Downshift, a library that helps you build simple, flexible, WAI-ARIA compliant enhanced input React components. See examples of how to create select fields, autocomplete components, and more with Downshift.
- Chris Nwamba
Aug 23, 2017 · downshift 🏎 is a primitive for building simple, flexible, and accessible autocomplete/typeahead/dropdown/select/combobox/etc components in React. It uses a render prop pattern to let you control how and when to render the input and menu, and a controlled props pattern to manage the state and accessibility.
DOWNSHIFT definition: 1. to become slower; to work at a slower speed: 2. to leave a job that is well paid and difficult…. Learn more.
