Listbox ♿📝📦

Build & compose WAI-ARIA compliant listbox based UI widgets.

Usage

Install it with yarn add listbox or npm install listbox and try out this piece of JSX:

import { Listbox, Option, OptionsList } from "listbox"

<Listbox>
  <OptionsList>
    <Option>Ford Motor Co.</Option>
    <Option>Mazda Motor Corp.</Option>
    <Option>Tesla Inc.</Option>
  </OptionsList>
</Listbox>

This is a primitive listbox component. It abstracts away core listbox behavior and accessibility. It has no opinion on layout or styling and can be composed into other listbox based UI widgets with little code. See what kinds of widgets can composed using a primitive listbox under "Live Playground".

Live Playground

Check out the live, editable code examples on CodeSandbox here:

Listbox (base): CodeSandBox | Storybook

Listbox (grid): CodeSandBox | Storybook

Scrollable Listbox: CodeSandBox | Storybook

Collapsible Dropdown: CodeSandBox | Storybook

Collapsible Dropdown (Grid): CodeSandBox | Storybook

ComboBox: CodeSandBox | Storybook

GitHub Reaction Popup: CodeSandBox | Storybook

Shipt Search Autocomplete: CodeSandBox | Storybook

Slack Mention Autocomplete: CodeSandBox | Storybook

Local Development

Storybook is used to interactively develop the UI components with hot reloading. This Storybook is published here.

To run Storybook:

Clone this repository

git clone git@github.com:hzhu/listbox.git

Install dependencies

yarn install

Run Storybook

yarn run storybook

Navigate to http://localhost:9009 to see live code changes during local development.

Testing

This project uses Jest and react-testing-library 🐐 for testing.

To run the tests

yarn test

or to continuously watch

yarn test --watch