A modular, lightweight, and headless React autocomplete solution.
npm install @szhsin/react-autocomplete> A modular, lightweight, and headless solution.
npm install @szhsin/react-autocomplete
- 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[^1], and some do not support tree shaking.
- Furthermore, these options often do not offer the level of customization you need.
- 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[^2], 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.
Here’s a live example of the 1.4 kB accessible React autocomplete: open in CodeSandbox
The API consists of a main React hook and a feature that work together under a defined contract.
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.
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.
- 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
[^1]: Referring to traditional solutions such as react-select and downshift.
[^2]: Using the autocompleteLite feature.