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

Библиотека Floating UI предназначена для управления позиционированием плавающих элементов в веб-приложениях. Перед началом использования необходимо выполнить установку пакета в проект. Floating UI выпускается как современный модуль ES, что позволяет интегрировать его в проекты на React, Vue, Vanilla JS или другие фронтенд-фреймворки.

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

Для большинства проектов на Node.js и современных сборщиков (Webpack, Vite, Parcel) оптимальным вариантом является установка через npm. Команда для установки основного пакета выглядит следующим образом:

npm install @floating-ui/dom
  • @floating-ui/dom — это базовый пакет для работы с DOM-элементами.
  • Он включает все необходимые функции для позиционирования всплывающих элементов, тултипов, меню и модальных окон.

Если проект использует TypeScript, пакет уже содержит встроенные типы, что позволяет работать с функциями библиотеки с полной поддержкой типизации.

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

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

yarn add @floating-ui/dom

Преимущество Yarn заключается в более быстрой установке и удобном управлении зависимостями, особенно в монорепозиториях.

Установка для React-проектов

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

npm install @floating-ui/react-dom

или через Yarn:

yarn add @floating-ui/react-dom
  • @floating-ui/react-dom предоставляет React-хуки (useFloating, useInteractions), упрощающие интеграцию с компонентами.
  • Пакет полностью совместим с React 17 и выше.
  • Типизация под TypeScript встроена и позволяет получать автокомплит при работе с позиционированием элементов.

Альтернативная установка через CDN

Для простых проектов без сборщика можно подключить библиотеку через CDN:

<script type="module">
  import { computePosition, offset, flip, shift } from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom/dist/floating-ui.dom.min.js';
</script>
  • Подходит для прототипов или небольших приложений.
  • Позволяет использовать основные утилиты без локальной установки.
  • Минимальная настройка — достаточно импортировать функции и применять их к элементам страницы.

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

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

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

console.log(typeof computePosition); // Должно вывести "function"

Если функция определена, библиотека установлена и готова к использованию.

Дополнительные пакеты и плагины

Floating UI предоставляет расширения для дополнительных сценариев:

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

Выбор конкретного пакета зависит от архитектуры проекта и требований к интеграции с фреймворком.

Рекомендации по установке

  • Использовать npm или Yarn в проектах с современными сборщиками для удобного управления зависимостями.
  • Для прототипов или статических страниц допускается подключение через CDN.
  • Выбирать пакет в зависимости от платформы: DOM, React или ядро для универсальных решений.

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

Оглавление