listbox

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:

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



Ford Motor Co.
Mazda Motor Corp.
Tesla Inc.


`

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
``