I built a picker widget that works with one line of code

#react #webdev #javascript #opensource

I kept running into the same problem: HTML elements are ugly, hard to style, and painful on mobile. Custom dropdown libraries are either React-only or require a ton of configuration.

So I built https://github.com/compsult/Quickpick-ui — a picker that works as a React component or a vanilla JS one-liner.

The simplest possible API

<br> Quickpick('#picker', ['January', 'February', 'March', 'April',<br> 'May', 'June', 'July', 'August', 'September', 'October',<br> 'November', 'December']);<br>

That's it. No build step, no config files, no CSS imports.

It adapts to the device

Desktop: hover to open, type to filter the grid instantly, Enter selects the first match
Mobile: tap to open, large touch targets, tap backdrop to close

I didn't want two separate code paths for this. The widget detects hover: none via media query and switches behavior automatically.

Type to filter is the killer feature

With a long list (say, all 50 US states), you don't want to scroll through a grid. Just start typing "new" and you instantly see New Hampshire, New Jersey, New Mexico, and New York. Enter selects the
first match.

https://compsult.github.io/Quickpick-ui/ — the 50 states demo is the best way to see this in action.

Works as a React component too

import { AppointmentTimeSelector } from './components';

items={[
{ value: 'CA', label: 'California' },
{ value: 'NY', label: 'New York' },
{ value: 'TX', label: 'Texas' },
]}
selectedValue={selected}
onTimeChange={(item) => setSelected(item.value)}
placeholder="Choose a state"
label="US State"
/>

There's also a BusinessHoursTimeSelector for dual start/end time pickers, and a loading prop that shows a shimmer skeleton while you fetch data.

What's under the hood