@floating-ui/dom

Positioning

This feature allows you to compute the position of a floating element relative to a reference element. The computePosition function returns a promise that resolves with the coordinates where the floating element should be placed.

import {computePosition} from '@floating-ui/dom';

const referenceElement = document.querySelector('#reference');
const floatingElement = document.querySelector('#floating');

computePosition(referenceElement, floatingElement).then(({x, y}) => {
  Object.assign(floatingElement.style, {
    left: `${x}px`,
    top: `${y}px`,
    position: 'absolute',
  });
});

Auto-Placement

Auto-placement automatically adjusts the placement of the floating element to ensure it stays in view within the viewport or a specified boundary. It can flip or shift the element as needed.

import {autoPlacement} from '@floating-ui/dom';

const referenceElement = document.querySelector('#reference');
const floatingElement = document.querySelector('#floating');

autoPlacement(referenceElement, floatingElement, {
  placement: 'bottom',
  middleware: [{name: 'flip', options: {padding: 8}}]
}).then(placement => {
  // Apply the placement to the floating element
});

Middleware

Middleware allows for advanced positioning behavior by adding additional logic during the position computation. Examples include 'shift' to keep the floating element within view and 'flip' to flip the element to the opposite side of the reference element if it would overflow the viewport.

import {computePosition, shift, flip} from '@floating-ui/dom';

const referenceElement = document.querySelector('#reference');
const floatingElement = document.querySelector('#floating');

computePosition(referenceElement, floatingElement, {
  middleware: [shift(), flip()]
}).then(({x, y, middlewareData}) => {
  // Use the x, y coordinates and middleware data to position the floating element
});