web is world
Webisworld
React
ReactPosts

React Laag Hooks for Positioning Tooltips and Popovers

React Laag (react-laag) the npm Package

React Laag Hooks 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

NPM npm install react-laag

YARN yarn add react-laag

Code Example

Example:
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 &amp;&amp;
        renderLayer(
          <div className="tooltip" {...layerProps}>
            {content}
            <Arrow {...arrowProps} />
          </div>
        )}
    </>
  );
}

Use the Component Like

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

Links

DemoGithubDocumentation

Share this page on:

Was this page helpful ?

Let us know how we did!

Subscribe Email Updates

to get latest update