Fast & Versatile Positioning Library – Floating UI

Category: Javascript , Recommended | June 22, 2022
Author:floating-ui
Views Total:1 view
Official Page:Go to website
Last Update:June 22, 2022
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. Or load the Floating UI from a CDN.

<script type="module">
  import * as FloatingUIDOM from 'https://cdn.skypack.dev/@floating-ui/[email protected]';
</script>
// OR
<script src="https://unpkg.com/@floating-ui/[email protected]"></script>
<script src="https://unpkg.com/@floating-ui/[email protected]"></script>

3. 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`,
  });
});

4. 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: [],
});

5. Modify the positioning coordinates or provide useful data using the middleware option.

// offset in px
import {computePosition, offset} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [offset(10)],
});
// move the floating element along the specified axes
import {computePosition, shift} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [shift()],
});
// changes the placement of the floating element to the opposite one by default
import {computePosition, flip} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [flip()],
});
// auto placement
import {computePosition, autoPlacement} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [autoPlacement()],
});
// hide the floating element in applicable situations
import {computePosition, hide} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [hide()],
}).then(({middlewareData}) => {
  const {referenceHidden} = middlewareData.hide;
  Object.assign(floatingEl.style, {
    visibility: referenceHidden ? 'hidden' : 'visible',
  });
});
// improved positioning for inline reference elements that span over multiple lines, such as hyperlinks or range selections
import {computePosition, inline} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [inline()],
});
// position an inner element of the floating element (usually a triangle or caret) so that it is centered to the reference element
<div id="tooltip">
  Tooltip text
  <div id="arrow"></div>
</div>
import {computePosition, arrow} from '@floating-ui/dom';
const arrowEl = document.querySelector('#arrow');
computePosition(referenceEl, floatingEl, {
  middleware: [
    arrow({
      element: arrowEl,
    }),
  ],
}).then(({middlewareData}) => {
  const {x, y} = middlewareData.arrow;
  Object.assign(arrowEl.style, {
    left: x != null ? `${x}px` : '',
    top: y != null ? `${y}px` : '',
  });
});
// change the size of the floating element
import {computePosition, size} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [
    size({
      apply({width, height, reference, floating}) {
        // Do things with the data, e.g.
        Object.assign(floatingEl.style, {
          maxWidth: `${width}px`,
          maxHeight: `${height}px`,
        });
      },
    }),
  ],
});

6. Automatically update the position of the floating element when required.

import {computePosition, autoUpdate} from '@floating-ui/dom';
async function update() {
  const {x, y} = await computePosition(referenceEl, floatingEl);
}
const cleanup = autoUpdate(referenceEl, floatingEl, update);

7. Compute the overflow offsets of either the reference or floating element relative to any clipping boundaries.

import {detectOverflow} from '@floating-ui/dom';
const middleware = {
  name: 'middleware',
  async fn(middlewareArguments) {
    const overflow = await detectOverflow(middlewareArguments);
    return {};
  },
};

Changelog:

06/12/2022

  • v0.5.3: Bugfix

05/28/2022

  • v0.5.2: Bugfix

05/19/2022

  • v0.5.1: Bugfix

You Might Be Interested In:


Leave a Reply