react-autosuggest VS reakit

One of the first ready-made solutions that come to mind are libraries such as react-autocomplete and react-autosuggest. These are great libraries that do exactly what they are supposed to do: when you enter a value in the input field, they display a dropdown with possible options for substitution. Unfortunately, these libraries are no longer actively supported by their maintainers (react-autosuggest is looking for the main maintainer, and react-autocomplete is in the archive).

I'm implementing an example from https://github.com/moroshko/react-autosuggest

Location Search enables search of locations such as addresses, cities by using Esri or Here Geo Location platforms behind the scenes. By combining it with a couple of React components (AutoSuggest and DebounceInput — Github code here), users are able to input a text, which eventually pops a series of suggestions found by the Location Search via the Geo.searchByText method.

React Auto Suggest - WAI-ARIA compliant autosuggest component built in React

🔍 Site ⭐ GitHub

Typescript is a mistake. Static typing seemed like such a potentially good thing to add to javascript, but the reality is it's a nightmare to work with. If you don't believe me, go to Reakit's github and tell me the complete set of valid options for creating a tooltip.

As a tech lead (or whoever makes the technical decision), it looks very tempting to adopt the open source UI libraries, if possible. In the React.js land, I used a bit of Charkra UI and Reakit.

I'm currently considering React-aria, HeadlessUI, Radix-ui and Reakit for reimplementing the user-interface for a customer, but i find it hard to choose.

I’ve got some libraries I’m looking into to fill the gap. Currently looking at radix, reakit, and react-spectrum.

reakit - Toolkit for building accessible rich web apps with React

Reakit is a lower-level component library for building accessible high-level UI libraries, design systems and applications with React. Reakit is tiny and fast.

1. Reakit

Regardless of what you use for styling though, you should look into so-called headless ui components. These are hooks and components only focused on functionality and accessibility, which you then use to build your own styled components. Some examples are https://reakit.io/, https://www.downshift-js.com/ and https://headlessui.dev/.

For common components, I can't recommend Reakit enough. It's a keyboard accessible, unstyled component library with dialogs, popovers, and much more. I use it for all of my personal projects nowadays. Combined with Framer Motion for animation and Styled Components for styling, it's a killer mix.