Fast & Versatile Positioning Library – Floating UI

Category: Javascript , Recommended | December 30, 2021
Author:floating-ui
Views Total:23 views
Official Page:Go to website
Last Update:December 30, 2021
License:MIT

Preview:

Fast & Versatile Positioning Library – Floating UI

Description:

A great alternative to the Popper.js library.

Floating UI is a blazing-fast, feature-rich positioning library for positioning any type of “floating” elements (like tooltips, popovers, dropdowns) to a given reference element.

Key Features:

  • Auto placement.
  • Supports virtual elements.
  • Auto flips floating elements to prevent overflow.
  • Compatible with React.

Basic Usage:

1. Install and import the Floating UI.

# Yarn
$ yarn add @floating-ui/dom

# NPM
$ npm i @floating-ui/dom
import {computePosition} from '@floating-ui/dom';

2. Compute the necessary coordinates to position the floating element next to a given reference element.

<button id="button">My button</button>
<div id="tooltip">My tooltip</div>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
computePosition(button, tooltip).then(({x, y}) => {
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});

3. Possible options for the computePosition.

computePosition(referenceEl, floatingEl, {
  // top', 'top-start', 'top-end', 'right'
  // 'right-start', 'right-end'
  // 'bottom', 'bottom-start', 'bottom-end'
  // 'left', 'left-start', 'left-end';
  placement: 'bottom', 
  // 'absolute' | 'fixed'
  strategy: 'default'
  // autoPlacement
  // arrow
  // flip
  // hide
  // offset
  // shift
  // size
  // or a custom function
  middleware: [],
});

Changelog:

12/30/2021

  • v0.1.10

You Might Be Interested In:


Leave a Reply