@floating-ui/react

What is @floating-ui/react?

The @floating-ui/react package is a library for creating floating elements that can be positioned next to a given reference element. It is commonly used for tooltips, popovers, dropdowns, and similar components. The library provides a set of hooks and utilities to manage the positioning and behavior of these floating elements in a React application.

What are @floating-ui/react's main functionalities?

Positioning Tooltips

This code demonstrates how to use @floating-ui/react to position a tooltip above a reference button, with an offset and the ability to flip based on available space.

import {useFloating, offset, flip} from '@floating-ui/react';

function Tooltip() {
  const {x, y, reference, floating, strategy} = useFloating({
    placement: 'top',
    middleware: [offset(10), flip()]
  });

  return (
    <>
      <button ref={reference}>Reference Element</button>
      <div ref={floating} style={{
        position: strategy,
        top: y ?? '',
        left: x ?? ''
      }}>Floating Content</div>
    </>
  );
}

Creating Popovers

This example shows how to create a popover component positioned to the right of a reference element, including shifting to stay within the viewport and an arrow pointing to the reference.

import {useFloating, shift, arrow} from '@floating-ui/react';

function Popover({referenceElement}) {
  const {x, y, floating, strategy, middlewareData} = useFloating({
    placement: 'right-start',
    middleware: [shift(), arrow({element: arrowElement})]
  });

  return (
    <div ref={floating} style={{
      position: strategy,
      top: y ?? '',
      left: x ?? ''
    }}>
      Popover Content
      <div ref={arrowElement} style={{
        position: 'absolute',
        [middlewareData.arrow.x != null ? 'left' : 'top']: middlewareData.arrow.x ?? middlewareData.arrow.y
      }} />
    </div>
  );
}

Other packages similar to @floating-ui/react

popper.js

Popper.js is a predecessor to @floating-ui/react, offering similar functionality for positioning floating elements. While Popper.js provides a robust API for managing poppers, @floating-ui/react offers a more modern, hook-based approach tailored for React applications, potentially offering a more streamlined integration.

tippy.js

Tippy.js is a tooltip and popover library that builds on top of Popper.js. It provides a high-level abstraction for creating and managing tooltips, popovers, and dropdowns. Compared to @floating-ui/react, Tippy.js includes more out-of-the-box styling and interaction options, making it a good choice for users looking for a more complete solution with less setup.

README

@floating-ui/react

This is the library to use Floating UI with React.