Getting Started

Installation

To download and install react-laag run:

yarn add react-laag

Create a Tooltip component

To get some sense of how react-laag works, we're going to build a simple Tooltip component. Eventually we want a component that looks like:

<Tooltip text="I'm a tooltip!">
  When you hover over this text, a tooltip will appear
</Tooltip>

And here's a working example:
When you hover over this text, a tooltip will appear

Importing the right tools

import { ToggleLayer, Arrow, useHover, Transition } from "react-laag";

Let's go over these one by one, and describe their role.

  • ToggleLayer - the most important component which takes care of all the heavy lifting (positioning)
  • Arrow - as the name suggests, a small component that renders an arrow for our tooltip
  • useHover - takes care of the logic of when to show the tooltip
  • Transition - an utility component that takes care of transitioning the tooltip in and out

The component

We need a component that accepts children and text (the tooltip's text) as props:

import { ToggleLayer, Arrow, useHover, Transition } from "react-laag";

function Tooltip({ children, text }) {
  return (
    // here comes our implementation
  );
}

Connect the tools together

import { ToggleLayer, Arrow, Transition, useHover } from "react-laag";

function Tooltip({ children, text }) {
  // 'isOpen' tells whether we should show the tooltip
  // 'hoverProps' contains event-handlers we should pass to our 'children' 
  const [isOpen, hoverProps] = useHover();

  return (
    <ToggleLayer
      // should we show the tooltip?
      isOpen={isOpen}

      // this is the place where we render the tooltip
      renderLayer={({ isOpen, layerProps, arrowStyle }) => (
        // let 'Transition' know when the tooltip should be
        // mounted or unmounted
        <Transition isOpen={isOpen}>
          {(isOpen, onTransitionEnd) => (
            <div
              // provide a 'ref' for calculation purposes
              ref={layerProps.ref}
              // let 'Transition' know when the transition
              // has finished
              onTransitionEnd={onTransitionEnd}
              style={{
                // forward the 'style' we received from
                // 'renderLayer'
                ...layerProps.style,
                // provide our own styles
                backgroundColor: "black",
                color: "white",
                padding: "2px 8px",
                fontSize: 12,
                borderRadius: 4,
                // create a fade effect
                transition: "0.2s",
                opacity: isOpen ? 1 : 0
              }}
            >
              {text}
              // forward the 'arrowStyle'
              // customize props to our liking
              <Arrow size={4} style={arrowStyle} backgroundColor="black" />
            </div>
          )}
        </Transition>
      )}
    >
      {({ triggerRef }) => (
        // wrap the 'children' in a 'span' element
        // and apply the 'triggerRef' and 'hoverProps'
        <span ref={triggerRef} {...hoverProps}>
          {children}
        </span>
      )}
    </ToggleLayer>
  );
}

And there you have it: our custom tooltip component in only a couple of lines 🎉

There's much more react-laag can do though. Go to the examples to get some inspiration, or check out the api reference to find out more possibilities.