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 &&
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
Share this page on:
Subscribe Email Updates
to get latest update