@floating-ui/utils

computePosition

This feature calculates the position of a floating element relative to a reference element and applies the calculated position to the floating element.

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

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

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

arrow

The arrow utility positions an arrow element within a floating element so that it is properly aligned with the reference element.

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

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

computePosition(referenceElement, floatingElement, {
  middleware: [arrow({element: arrowElement})],
}).then(data => {
  Object.assign(floatingElement.style, {
    left: `${data.x}px`,
    top: `${data.y}px`,
  });
  Object.assign(arrowElement.style, data.middlewareData.arrow);
});

autoPlacement

The autoPlacement utility automatically chooses the best placement for a floating element based on available space in the viewport.

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

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

computePosition(referenceElement, floatingElement, {
  middleware: [autoPlacement()],
}).then(data => {
  Object.assign(floatingElement.style, {
    left: `${data.x}px`,
    top: `${data.y}px`,
  });
});

flip

The flip utility adjusts the placement of the floating element to prevent it from overflowing the viewport.

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

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

computePosition(referenceElement, floatingElement, {
  middleware: [flip()],
}).then(data => {
  Object.assign(floatingElement.style, {
    left: `${data.x}px`,
    top: `${data.y}px`,
  });
});

offset

The offset utility adds space between the reference element and the floating element, defined by the offset value.

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

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

computePosition(referenceElement, floatingElement, {
  middleware: [offset(10)],
}).then(data => {
  Object.assign(floatingElement.style, {
    left: `${data.x}px`,
    top: `${data.y}px`,
  });
});