react-laag

Primitives to build things like tooltips, dropdown menus and pop-overs.

Basically any kind of layer that can be toggled. Focus on what your layer should look like, and let react-laag take care of where and when to show it.

Documentation

Visit the website for more examples and docs here.

Features

• Build your own tooltips / dropdown-menus / pop-overs / etc...
• Not opinionated regarding styling or animations
• Highly customizable
• Small footprint (tree-shakable)
• 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

Getting started

Installation

npm install --save react-laag

or

yarn add react-laag

A first component

import React from "react";
import { ToggleLayer, anchor } from "react-laag";

function Example() {
  return (
    <ToggleLayer
      // provide placement config
      placement={{ anchor: anchor.BOTTOM_CENTER }}
      // render-prop to render our layer
      renderLayer={({ layerProps, isOpen }) =>
        // only render on `isOpen`
        isOpen && (
          <div
            // for calculation stuff
            ref={layerProps.ref}
            style={{
              // inject calculated positional styles
              ...layerProps.style

              // add your own styles
            }}
          />
        )
      }
    >
      {({ toggle, triggerRef }) => (
        <div
          // only the `triggerRef` is required...
          ref={triggerRef}
          // ...the rest is up to you
          onClick={toggle}
          style={{}}
        />
      )}
    </ToggleLayer>
  );
}

...or use the hook:

import React from "react";
import { useToggleLayer, anchor } from "react-laag";

function Example() {
  const [element, toggleLayerProps] = useToggleLayer(
    // render the layer
    ({ layerProps, isOpen }) => isOpen && <div {...layerProps} />,
    // provide some options, like placement
    { placement: { anchor: anchor.BOTTOM_CENTER } }
  );

  return (
    <div>
      {element}
      <div onClick={toggleLayerProps.openFromMouseEvent}>Click me!</div>
    </div>
  );
}

License

MIT © everweij