Getting Started
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 kB1, 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.4kB accessible React autocomplete:
Bundle size comparison
| Package | Size (min+gzip) | Size vs base |
|---|---|---|
| @szhsin/react-autocomplete | 2.62kB | 1× (base) |
| downshift | 12.3kB | 4.7× larger |
| @ariakit/react | 33.1kB | 12.6× larger |
| @headlessui/react | 40.3kB | 15.4× larger |
| @base-ui/autocomplete | 48.2kB | 18.4× larger |
| react-aria | 50.7kB | 19.3× larger |