@pras-ui/floating-kit

A low-level, headless component for positioning floating elements. This package is built on top of the excellent @floating-ui/react-dom to provide a simple, composable API for tooltips, popups, and more.

This package provides the core puzzle pieces for creating menu-type components like popups, dropdowns, and dialogs. It is typically used by other components, like @pras-ui/popup-menu, to handle positioning.

Installation

npm install @pras-ui/floating-kit

Usage

Here is a basic example of how to make a simple floating element, like a tooltip.

import React from "react";
import {
  FloatingRoot,
  FloatingTrigger,
  FloatingContent,
  FloatingPortal,
} from "@pras-ui/floating-kit";

function MyTooltip() {
  const [open, setOpen] = React.useState(false);
  const triggerRef = React.useRef(null);

  return (
    <FloatingRoot>
      <FloatingTrigger virtualTrigger={triggerRef}>
        <button
          ref={triggerRef}
          onMouseEnter={() => setOpen(true)}
          onMouseLeave={() => setOpen(false)}
        >
          Hover me
        </button>
      </FloatingTrigger>

      {open && (
        <FloatingPortal>
          <FloatingContent side="top" align="center">
            <div>My Tooltip</div>
          </FloatingContent>
        </FloatingPortal>
      )}
    </FloatingRoot>
  );
}

Components

• FloatingRoot: The root component that provides the context for the floating element.
• FloatingTrigger: A component that wraps the reference element (the element the floating content is positioned relative to).
• FloatingContent: The component that will be floated. It accepts props like side, align, and sideOffset to control its position.
• FloatingPortal: A component that renders its children into a React Portal, ensuring the floating content appears on top of other UI elements.
• FloatingArrow: An optional component to render an arrow that points to the trigger element. It should be placed inside FloatingContent.