Overview

Where is it good for?

react-laag exposes primitives to build things like tooltips, dropdown menus and pop-overs in React. Basically any kind of layer that can be toggled. The keyword here is primitive. It's not a library with components that can be instantly used in your app, but more in the spirit of tools like react-beautiful-dnd and downshift, where a lot of work is being done for you. In other words, you have to code the last 25%.

Why do you need it?

There are already a great number of libraries on NPM that cover things like tooltips and popovers. So, why should you choose react-laag over all the others?

If these existing packages fit perfectly in your own UI or design system, you need to look no further. However, in many cases they don't fit perfectly. Sometimes you want custom behavior or styling that the existing component does not offer. When it does support custom behavior or styling, you may have to jump through hoops to get there eventually.

This is where react-laag comes in: it offers you flexible tools to build components the way you want them to look and behave 💪🏻.

Features

Not opinionated regarding styling or animations
Highly customizable
Small footprint
Zero dependencies
Built with typescript / ships with typescript definitions
Integrates well with other libraries
Automatically adjusts your layer's placement to fit the screen
Works with nested scroll-containers
Observes and reacts to changes in dimensions

Browser compatibility

react-laag has been tested on all modern browsers and should also work in IE 11.

In order to watch elements for resizing, react-laag makes use of ResizeObserver. If your browser does not come with ResizeObserver out of the box, you can inject a polyfill via props, ie.:

import ResizeObserver from "resize-observer-polyfill";
import { ToggleLayer } from "react-laag";

<ToggleLayer ResizeObserver={ResizeObserver} />;

Server-side rendering

react-laag is fully compatible with server-side rendering