FezVrasta/popper.js

# Motivation

This page aims to explain why this new package was created.

Check out the new
[Popper v2 to Floating UI migration guide](/docs/migration).

## Comparison with Popper-style API

[Popper](https://popper.js.org) is currently the most popular
open source solution to position floating elements, created
in 2016. Prior to that it was
[Tether](https://tetherjs.dev/docs/welcome/).

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](/docs/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 `computeStyles{:.string}` and
  `applyStyles{:.string}` in 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
  write. `requires{:.key}`, `requiresIfExists{:.key}`,
  `phase{:.key}`, 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,
  like the `size(){:js}` and `inline(){:js}` 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.