Установка через npm

Библиотека Floating UI предназначена для управления позиционированием всплывающих элементов в веб-приложениях. Установка через npm позволяет интегрировать её в современный фронтенд-проект с использованием модульной системы ES или CommonJS.

Установка пакета

Для установки основной библиотеки используется команда:

npm install @floating-ui/dom
  • @floating-ui/dom — это основной пакет для работы с DOM-элементами.
  • После установки библиотека становится доступной через стандартный импорт:
import { computePosition, autoPlacement, offset } from '@floating-ui/dom';

Для проектов с использованием CommonJS можно использовать:

const { computePosition, autoPlacement, offset } = require('@floating-ui/dom');

Варианты пакетов

Floating UI предоставляет несколько пакетов, ориентированных на разные среды:

  1. @floating-ui/dom — для работы с обычными DOM-элементами в браузере.
  2. @floating-ui/react — для интеграции с React-компонентами.
  3. @floating-ui/core — базовая библиотека, используемая внутренне другими пакетами, может быть полезна для кастомных интеграций.

Установка через npm производится аналогично:

npm install @floating-ui/react

или

npm install @floating-ui/core

Выбор пакета зависит от окружения и архитектуры проекта. Для большинства веб-приложений, где требуется позиционирование DOM-элементов, достаточно @floating-ui/dom.

Проверка установки

После установки следует убедиться, что пакет корректно подключен. Для этого можно выполнить короткий тест:

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

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

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

Если скрипт выполняется без ошибок и элемент позиционируется корректно, установка прошла успешно.

Управление зависимостями

  • Для контроля версий пакета используется package.json.
  • Рекомендуется указывать точную версию Floating UI, чтобы избежать неожиданного поведения при обновлениях:
{
  "dependencies": {
    "@floating-ui/dom": "^1.4.0"
  }
}
  • Обновление производится через npm update @floating-ui/dom или npm install @floating-ui/dom@latest.

Интеграция с сборщиками

Vite, Webpack, Parcel и другие современные сборщики работают с Floating UI без дополнительных настроек, так как библиотека поставляется в виде ES-модулей. Основные рекомендации:

  • Проверять совместимость с TypeScript через @types/floating-ui__dom при необходимости.
  • Использовать tree-shaking, чтобы подключать только необходимые функции: computePosition, offset, flip, shift и т.д.

Практические советы

  • Всегда устанавливать пакет локально в проект (npm install), а не глобально.
  • Для командной работы фиксировать версии в package-lock.json.
  • При использовании React лучше сразу подключать @floating-ui/react, так как он включает оптимизации для хука useFloating.

Проверка доступности CLI

Некоторые функции Floating UI могут использоваться через скрипты Node.js. Проверка установки через CLI выполняется командой:

npx floating-ui --version

Если выводит версию, пакет корректно установлен и доступен для локальных скриптов.

Совместимость с браузерами

Библиотека рассчитана на современные браузеры с поддержкой ES6 и стандартов DOM. Для старых версий Internet Explorer требуется полифиллы для Promise и Object.assign, так как Floating UI активно использует эти функции.

Установка через npm является стандартным и рекомендуемым способом интеграции Floating UI, обеспечивая удобное управление зависимостями, обновлениями и совместимостью с современными сборщиками.

Оглавление