React
The Dropdown component provides a more flexible alternative to the native Select component to implement things like populating options from a search API request.
Installation
The Dropdown component is available as a separate package, @hoverinc/dropdown that depends on @hoverinc/design-system-react-web.
yarn add @hoverinc/dropdown
Theme
The theme for the Dropdown component must also be added to your DesignSystemProvider
Simple Select
Dropdown can behave just like a simple native Select
component, albeit a
bit prettier. That said, a native Select
might be
the right choice here. See below for use cases where Dropdown shines.
The inPortal
prop tells Dropdown to open its menu in a
Portal
in cases where overflow: hidden
or
adjacent components may interfere with it.
Filtering
Use the onInputValue
change prop to implement filtering on items
.
Asynchronous
Set the isLoading
prop to indicate the state of an asynchronous request when
populating items from an API.
Icon
Like other form inputs, Dropdown supports displaying an icon in the input.
Item Icons
Include a system icon as the icon
property in items to render an icons in the
list.