@quid/react-dropdown

React dropdown component with ARIA accessibility and advanced functionalities

Usage no npm install needed!

<script type="module">
  import quidReactDropdown from 'https://cdn.skypack.dev/@quid/react-dropdown';
</script>

README

A feature complete "dropdown" component built with React and Downshift.

It supports most of the possible use cases, included category grouping, two column layout, and more.

Installation

npm install --save @quid/react-dropdown

# or

yarn add @quid/react-dropdown

Usage

import Dropdown from '@quid/react-dropdown';

const items = [
  { id: 1, label: 'One' },
  { id: 2, label: 'Two' },
  { id: 3, label: 'Three' },
  { id: 4, label: 'Four' },
  { id: 5, label: 'Five' },
];

<Dropdown items={items} selectedItems={[items[0]]}>
  {({ getInputProps }) => <input readOnly {...getInputProps()} />}
</Dropdown>;