React-laag

#tutorial #react

React-laag is a React library for creating layered UIs, such as tooltips, popovers, and dropdowns. It provides a simple API for creating these types of UI elements, and handles positioning and interaction logic for you.

One of the key features of react-laag is its ability to position a layer relative to a trigger element. This allows you to create UI elements that appear
next to
or above/below a trigger element, such as a button or link. React-laag also provides a set of hooks and utilities for handling user interactions, such as clicking or hovering over the trigger element.

Here's an example of how react-laag can be used to create a tooltip component:

import React from 'react';
import { useLayer, Arrow } from 'react-laag';

const Tooltip = ({ children, content }) => {
  const [isOpen, setOpen] = React.useState(false);
  const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
    isOpen,
    onOutsideClick: () => setOpen(false),
    triggerOffset: 8,
    placement: 'top-center',
  });

  return (
    <>
      <span
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        {...triggerProps}
      >
        {children}
      </span>
      {renderLayer(
        <div {...layerProps}>
          <div>{content}</div>
          <Arrow {...arrowProps} />
        </div>
      )}
    </>
  );
};

export default Tooltip;