Repository files navigation

Popper is now Floating UI! For Popper v2, visitits dedicated branch.

Website

Floating UI is a low-level library for positioning "floating" elements liketooltips, popovers, dropdowns, menus and more while intelligently keeping themin view.

Challenges arise when positioning floating elements as they get taken out of thenormal layout flow of a document, leading to issues with clipping and overflow,which is where this library can help!

• Tiny: 600-byte core with highly modular architecture for tree-shaking
• Low-level: Granular control over positioning behavior
• Pure: Predictable and side-effect free
• Extensible: Powerful middleware system
• Platform-agnostic: Runs on any JavaScript environment which providesmeasurement APIs, including the web and React Native

To use it on the web:

npm install @floating-ui/dom

yarn add @floating-ui/dom

import{computePosition}from'@floating-ui/dom';constreferenceElement=document.querySelector('#button');constfloatingElement=document.querySelector('#tooltip');functionapplyStyles({x=0, y=0, strategy='absolute'}){Object.assign(floatingElement.style,{position:strategy,left:`${x}px`,top:`${y}px`,});}applyStyles();computePosition(referenceElement,floatingElement,{placement:'right',}).then(applyStyles);

Visit the docs for detailed information.

Floating UI is published with default, development, andproduction builds, using Node's support forexport conditions.

• "default": usesprocess.env.NODE_ENV, in whichyour bundler handles the env variable, dead code elimination,and minification
• "production": minified with no debug logging
• "development": unminified with debug logging

If you're using a bundler like webpack, Vite, or Parcel, this ishandled for youautomatically.

If this is not handled, you must opt into one of the builds intools that support export conditions. This is done differentlyfor each tool.

• React DOM
• React Native (*experimental)

Right now, Floating UI focuses on positioning floating elements, but a packagethat exposes higher-level primitives for building these elements more easily isin development.

This project is a monorepo written in TypeScript using npm workspaces. Thewebsite is using Next.js SSG and Tailwind CSS for styling.

• Fork and clone the repo
• Install dependencies in root directory withnpm install
• Build initial package dist files withnpm run build

npm run dev in the root will launch the@floating-ui/dom development visualtests athttp://localhost:1234. The playground uses React to write each testroute, bundled by Parcel. When making changes topackages/core orpackages/dom, Parcel will hot reload the app and display the changes.

Each route has screenshots taken of the page by Playwright to ensure all thefunctionalities work as expected; this is an easy, reliable and high-level wayof testing the code.

Below the main container are UI controls to turn on certain state and options.Every single combination of state is tested visually via the snapshots to coveras much as possible.

npm -w website run dev in the root will launch the website atlocalhost:3000.

MIT