React-Autocomplete

A modular, lightweight, and headless solution.

Examples and Docs

npm install @szhsin/react-autocomplete

Intro

What's the problem?

• You require an autocomplete/select/search feature for your website, and you want it to be accessible.
• You begin by building one from scratch, but quickly realize that the implementation is not trivial.
• While searching for open-source alternatives, you find that many have significant bundle sizes, typically ranging from 10kB to 50kB¹, and some do not support tree shaking.
• Furthermore, these options often do not offer the level of customization you need.

What makes this solution unique?

• Modular: We carefully design the API with a modular approach, providing a no-frills solution that allows you to bundle only the code you need for your website. No more and no less!

• Lightweight: At just 1.4 kB², you get a fully functional and accessible autocomplete solution in React. It's almost negligible in size and likely lighter than creating one from scratch, so you can adopt it without hesitation.

• Customizable: Thanks to the modular design, you can easily customize existing features or even create your own feature (a plugin-style module) to enhance the solution.

Sounds promising! How does it look?

Here’s a live example of the 1.4 kB accessible React autocomplete: open in CodeSandbox

Design Concept

The API consists of a main React hook and a feature that work together under a defined contract.

Main hook

useCombobox/useMultiSelect - acts as the primary entry point, utilizing a classic headless React hook style API. It manages state and data, and must connect with a feature to deliver the required functionalities.

Feature (A replaceable module)

A feature implements the desired functionalities (behavior), such as autocomplete or multiSelect. There are two types of features:

• Atom: A minimal, indivisible unit that can function independently or be combined into larger features.
• Molecule: Composed of two or more atoms or other molecules, providing more advanced features.

One advantage of this architecture is you can easily combine any number of atoms or molecules to create the feature you need, as long as the resulting feature conforms to the same contract.

Supported features

• Autocomplete (Combobox)
• Supercomplete (Inline text completion)
• Dropdown with autocomplete
• Multiple selection
• Multiple selection in dropdown
• Select-only Combobox

Visit the site for examples and docs

Footnotes

1. Referring to traditional solutions such as react-select and downshift. ↩

2. Using the autocompleteLite feature. ↩