Изменения в названиях

Floating UI — это современная библиотека для управления позиционированием всплывающих элементов в веб-приложениях, пришедшая на смену Popper.js. Одной из ключевых особенностей новой библиотеки является унификация и упрощение названий функций, параметров и концепций, что облегчает понимание и использование.

Основные изменения в названиях функций

computePosition вместо createPopper

Ранее в Popper.js для вычисления позиции всплывающего элемента использовалась функция createPopper. В Floating UI её заменяет computePosition. Это отражает более точное назначение функции: она только вычисляет координаты, не создавая сам элемент в DOM.

Пример использования:

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

const reference = document.querySelector('#button');
const floating = document.querySelector('#tooltip');

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

Ключевое отличие: computePosition не отвечает за рендеринг, что позволяет гибко интегрировать его с любыми фреймворками или библиотеками.

Middleware вместо modifiers

В Popper.js использовались modifiers — функции, изменяющие поведение позиционирования. В Floating UI они переименованы в middleware, что лучше отражает их функционал: промежуточная обработка данных позиции перед финальным рендером.

Сравнение:

  • Popper.js:

    modifiers: [{ name: 'offset', options: { offset: [0, 10] } }]

  • Floating UI:

    middleware: [offset(10)]

Middleware поддерживают цепочку вызовов, где каждый элемент может корректировать положение, размеры или проверять столкновения.

Изменения в названиях Middleware

Многие популярные модификаторы Popper.js получили новые имена:

Popper.js Floating UI Примечание
offset offset Сохраняется, интерфейс упрощён
flip flip Название сохраняется, логика схожа
preventOverflow shift / limitShift Более гибкая обработка столкновений
arrow arrow Поддержка новой схемы координат

Middleware могут комбинироваться в цепочки, что упрощает создание сложных сценариев позиционирования:

computePosition(reference, floating, {
  middleware: [
    offset(10),
    flip(),
    arrow({ element: arrowElement })
  ]
});

Переименование атрибутов и параметров

  • placement — сохраняется, но теперь поддерживает дополнительные сокращённые форматы ('top-start', 'bottom-end') с более предсказуемым поведением.
  • strategy — аналог position в Popper.js, принимает 'absolute' или 'fixed'.
  • x и y — явное обозначение координат, возвращаемых computePosition, вместо popperOffsets.

Пример:

const { x, y, placement } = await computePosition(reference, floating, {
  middleware: [offset(8)]
});

floating.style.left = `${x}px`;
floating.style.top = `${y}px`;

Новая структура импорта

Popper.js часто требовал импортов через модуль Popper и подключение модификаторов:

import { createPopper } from '@popperjs/core';
import offset from '@popperjs/core/lib/modifiers/offset';

Floating UI предлагает модульный импорт каждого middleware, что уменьшает размер бандла и улучшает tree-shaking:

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

Итоговые ключевые изменения

  1. createPopper → computePosition
  2. modifiers → middleware
  3. preventOverflow → shift / limitShift
  4. popperOffsets → x и y
  5. Явный modular import вместо общей сборки

Эти изменения делают библиотеку более понятной, предсказуемой и лёгкой для интеграции с современными фреймворками, сохраняя мощь и гибкость управления позиционированием всплывающих элементов.

Оглавление