Floating UI Lite

Note

Floating UI Lite is not a component. It is a utility function for handling floating elements.

import {computePosition, FloatingUiOptions} from './floating-ui/index.js';


const config: FloatingUiOptions = {
  anchorPoint: 'right-start', // Default bottom
  offset: {x: 6, y: 2}, // Default 0,0
  flip: true // Default true. Whether or not to flip the floating element should there be overflow
};
/*
 * computePosition takes three arguments:
 * - The anchor element
 * - The floating element
 * - The config. The example above has all the available options
 */
const floatingUiCanceller = computePosition(anchorElement, floatingElement, config);

floatingUiCanceller() // Call this to clear event listeners and stop auto updating position

Guidelines

Floating UI Lite is a utility function that allows one to anchor floating elements to an anchor.

It is currently used by the different menus in our Grammar Web library, but the utility can be used anywhere, even custom components.

The utility is still in production, so the API is prone to changes.