Floating UIとは？Floating Element Positioning

ページ内ナビ

概要

Floating UIはtooltip、popover、dropdown等のfloating elementをanchorへ配置し、viewport collisionを避けながら位置を調整するlow-level libraryです。React向けpackageはpositioningに加え、hover・focus・click・dismiss等のinteraction hooksを組み合わせてaccessibleなfloating UIを構築できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

anchorとfloating elementの位置を計算しviewport collisionを回避する

reference elementとfloating elementのgeometryを使って座標を計算し、offset、flip、shift等のmiddlewareでedge collisionやplacement調整を扱えます。

出典：[1][4]

Reactではpositioningとinteraction hooksを同じ構成で組み合わせる

@floating-ui/reactはReact DOM向けpositioningに加え、hover、focus、click、dismiss等のuser interactionを構成するhooks/componentsを提供します。

出典：[1][2]

DOM・React・Vue・React Native・custom platformへ分割されたpackageを選べる

monorepoは@floating-ui/dom、@floating-ui/react、@floating-ui/react-native、@floating-ui/vue、@floating-ui/core等を持ち、target platformと必要機能に応じて依存を絞れます。

出典：[1]

向いている用途

tooltipやpopoverのpositioningとinteractionをdesign systemで共通化したい場合に向く

scroll containerやviewport edgeを跨ぐplacement調整、dismissやfocus等を各componentで個別実装せず、低レベルprimitiveとして共有したいfrontend systemに適します。

出典：[1][4]

導入前の確認

React package 0.27.20はReact/React DOM 17以上を要求する

package metadataはReactとReact DOMを>=17.0.0のpeer dependencyとして定義します。React以外のplatformでは対応packageを選んでください。

出典：[2]

0.27.20はscroll listenerとTypeScript optional property handlingを修正する

0.27.20ではscroll listenerのredundant passive optionを除去し、exactOptionalPropertyTypesでoptional propertyへ明示的なundefinedを渡すcaseを修正しています。

出典：[3]

参考にした公式資料

[1]Floating UI README(2026-10-05)
[2]@floating-ui/react 0.27.20 package metadata(2026-10-05)
[3]@floating-ui/react 0.27.20 release(2026-10-05)
[4]Floating UI React documentation(2026-10-05)
[5]Floating UI MIT license(2026-10-05)

編集部からの補足

position計算だけなら@floating-ui/react-dom、interactionも含めるなら@floating-ui/reactなど、用途ごとにpackageが分かれます。bundle sizeと必要機能で選択してください。

3ステップで試す

1
Floating UI React 0.27.20を固定して導入する
一時npm projectへReact packageとpeer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/floating-ui.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @floating-ui/react@0.27.20 react@19.2.0 react-dom@19.2.0
2
package versionを確認する
review対象のReact package versionが導入されていることを確認します。
test "$(node -e "console.log(JSON.parse(require('fs').readFileSync('node_modules/@floating-ui/react/package.json')).version)")" = '0.27.20'
3
positioningとinteraction APIのexportを確認する
DOMを起動せず、positioning middlewareとReact interaction hookの主要exportを確認します。
test "$(node --input-type=module -e "import * as F from '@floating-ui/react'; console.log(['useFloating','offset','flip','shift','useHover'].every(k=>k in F))")" = 'true'

公式READMEで確認

成長

成長の推移 · 直近30日

32,756 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 3
Open PR: 31

開発アクティビティを蓄積中です。

Built with

TypeScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

positioning-engine
tooltip
position
dropdown
popover
positioning
tooltip-position
popovers
hacktoberfest

Stars: 32,756
Forks: 1,716
Watchers: 255
Open Issues: 38
Contributors: 126
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/28