Is it possible to use this library without relying on Bootstrap?

[Falcowoski]

Maybe it's a stupid question, but I plan on removing Bootstrap from an application I work on, as we have our own design system. However I really like this library, which is I would say one of the best, if not the best of its kind today.

I would like to continue using it, even if I need to rewrite some styles by hand. Is it possible?

[ericgio]

Hi @Falcowoski, thanks for the question and the kind words! The short answer to your question is yes, it's absolutely possible to use this component without Bootstrap CSS.

The longer answer is that the level of effort involved in customizing the component, whether using Bootstrap or not, depends heavily on what you're trying to customize and how. A simple scenario would be using the single-select typeahead and targeting some of the Bootstrap classnames to customize the look and feel of the input, menu, and menu items. The multi-select version is a bit more complicated and would involve customizing the tokens as well.

Here's a sandbox example of the component without Bootstrap and just some light custom CSS: https://codesandbox.io/s/rbt-no-bootstrap-26xkth

A more complicated scenario would be if you have existing UI components like an input that you want to use in the typeahead. In that case, you'd need to use the render props exposed to replace the built-in ones. This can be a significant amount of work, especially if you're using Typescript and need to properly type some of the arguments.

I honestly haven't fully tested the limits of customization of the existing library, but my long-term goal is to provide a component API such that the look and feel of each element is totally flexible. I'd love to hear about your experience customizing the component and whether there are ways to make it easier going forward.