react-laag

Hooks for positioning tooltips & popovers
npm install react-laag
ExamplesDocumentation

Features

  • 📦

    Lightweight

    Only 8kb minified & gzipped / tree-shakable / no dependencies

  • 🛠

    Headless UI

    We do the positioning, you do the rest. You maintain full control over the look and feel.

  • 🚀

    Fast

    Optimized for performance / no scroll lag whatsoever

  • 🏗

    Simple & flexible

    Comes with sensible defaults out of the box, but you can tweak things to your liking

Playground

Try it out and see how it works!

Options

left
right
top
bottom
0
10
4
off
partial
full
Trigger
import * as React from "react";
import { useLayer, Arrow } from "react-laag";
import { Button, Menu } from "./ui";

function Example() {
  const [isOpen, setOpen] = React.useState(false);

  const { renderLayer, triggerProps, layerProps, arrowProps } =
    useLayer({
      isOpen,
      arrowOffset: 4
    });

  return (
    <>
      <Button {...triggerProps} onClick={() => setOpen(!isOpen)}>
        Trigger
      </Button>
      {isOpen &&
        renderLayer(
          <Menu
            {...layerProps}
            style={{ ...layerProps.style, width: 200, height: 150 }}
          >
            Layer
            <Arrow {...arrowProps} size={5} roundness={0} />
          </Menu>
        )}
    </>
  );
}