This page aims to explain why this new package was created.
Check out the new Popper v2 to Floating UI migration guide.
Comparison with Popper-style API
Popper is currently the most popular open source solution to position floating elements, created in 2016. Prior to that it was Tether.
Floating UI is the evolution of Popper v2, and aims to be a lower-level solution similar to CSS in which you progressively add properties to achieve desired positioning behavior. The migration guide also explains this in detail.
The differences are summarized as follows:
- 📱 Cross-platform: Floating UI is cross-platform, while Popper only runs on the web using the DOM. Floating UI supports React Native, Canvas, WebGL, and more with the right interface logic.
- 🪶 Smaller size: The code is smaller and more optimized, and everything is modular by default, and thus tree-shakeable. Popper is not tree-shakeable by default, and even when enabling the tree-shaking format it’s not as effective. With Floating UI, you can even change the DOM platform to be smaller to save even more size if you don’t need all the advanced checks.
- 🎛️ More intuitive API: Popper’s API is verbose and encourages mutation, which can be awkward to configure and hard to debug. Floating UI is pure with more ergonomic usage.
- 🕹️ Inversion of control: There were many issues opened
surrounding the nature of
applyStylesin Popper due to their opinionated defaults. Floating UI is just a function that returns some unrounded numbers for you, which you can use as you please.
- 💪 Improved extensibility: Modifiers in Popper are hard to
phase, needing to check for other modifiers’ data to write the correct logic, etc. Floating UI removes all of it, making it much easier to write custom middleware. The order of the array is yours to control and configure. The new architecture also supports finer control over the middleware lifecycle.
- 💎 More features: New features are easier to support thanks
to the new architecture, and Floating UI already offers more,
inline()middleware. Importantly, new features are tree-shaken away if you don’t use them, so there’s no size cost for bundler users.
- 🔮 More predictable: Floating UI doesn’t perform any “magic”, like pre-configuring middleware or adding event listeners to update the position. This means you use Floating UI starting at its most fundamental level, without any middleware enabled already. You add features as you need them, which makes the library more predictable.
- 🔒 Strongly typed by default: TypeScript is a first-class citizen as the codebase is written in it. Popper is loosely typed by default, so you don’t get autocomplete hints among other benefits of the type system.
Floating UI aims to be an ideal solution for component libraries, like Bootstrap or MUI, due to its low-level and unopinionated nature.