React Laag Hooks for Positioning Tooltips and Popovers


React Laag Hooks for Positioning Tooltips and Popovers

React Laag (react-laag) the npm Package

React Laag provides a couple of tools to position UI elements such as tooltips and popovers with ease,

Some Main Features of React Laag

  • 📦 Only 8kb minified & gzipped / tree-shakable / no dependencies
  • 🛠 We do the positioning, you do the rest. You maintain full control over the look and feel.
  • 🚀 Optimized for performance / no scroll lag whatsoever
  • 🏗 Comes with sensible defaults out of the box, but you can tweak things to your liking

Installation

Code Example

-

-

Example:

Copied
import React from "react";
import { useLayer, useHover, Arrow } from "react-laag";

const Tooltip = ({ children, content }) => {
  const [isOver, hoverProps] = useHover();

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

  return (
    <>
      <span {...triggerProps} {...hoverProps}>
        {children}
      </span>
      {isOver &&
        renderLayer(
          <div className="tooltip" {...layerProps}>
            {content}
            <Arrow {...arrowProps} />
          </div>
        )}
    </>
  );
}

Use the Component Like

-

-

Example:

Copied
<div>
    <Tooltip content="I'm a tooltip!">this</Tooltip>
</div>

Links