JSPM – listbox@0.1.1

Package Exports

listbox

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (listbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 many 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): https://codesandbox.io/s/oo12o0yry

Listbox (grid): https://codesandbox.io/s/mjloyy8r39

Scrollable Listbox: https://codesandbox.io/s/14knzyl2vq

Collapsible Dropdown: https://codesandbox.io/s/l2l7xvvp5l

Collapsible Dropdown (Grid): https://codesandbox.io/s/p5412lzn2m

ComboBox: https://codesandbox.io/s/mq5z2rmxnx

GitHub Comment Reaction Popup: https://codesandbox.io/s/kkw2w3lkz5

Slack Mention Combo Box: Coming Soon

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