inline

import {inline} from '@floating-ui/dom';

import {inline} from '@floating-ui/dom';

In the following examples, the placementplacement is 'top''top'.

Without inline()inline():

With inline()inline():

Usage

computePosition(referenceEl, floatingEl, {
  middleware: [inline()],
});

computePosition(referenceEl, floatingEl, {
  middleware: [inline()],
});

Choosing a rect

By default, inline()inline() infers which of the ClientRectClientRects to choose based on the placementplacement. However, you may want a different rect to be chosen.

For instance, if the user hovered over the last client rect, you likely want the floating element to be placed there. This logic is only applied when the reference element’s rects are disjoined.

function onMouseEnter({clientX: x, clientY: y}) {
  computePosition(referenceEl, floatingEl, {
    middleware: [inline({x, y})],
  }).then(({x, y}) => {
    // ...
  });
}
 
referenceEl.addEventListener('mouseenter', onMouseEnter);

function onMouseEnter({clientX: x, clientY: y}) {
  computePosition(referenceEl, floatingEl, {
    middleware: [inline({x, y})],
  }).then(({x, y}) => {
    // ...
  });
}
 
referenceEl.addEventListener('mouseenter', onMouseEnter);

Order

inline()inline() should generally be placed toward the beginning of your middleware array, before flip()flip() (if used).

Options

These are the options you can pass to inline()inline().

interface InlineOptions {
  x?: number;
  y?: number;
  padding?: number | SideObject;
}

interface InlineOptions {
  x?: number;
  y?: number;
  padding?: number | SideObject;
}

x

default: undefinedundefined

This is the viewport-relative (client) x-axis coordinate which can be passed in to choose a rect.

y

default: undefinedundefined

This is the viewport-relative (client) y-axis coordinate which can be passed in to choose a rect.

padding

default: 22

This describes the padding around a disjoined rect when choosing it.

Deriving options from state

You can derive the options from the middleware lifecycle state:

inline((state) => ({
  padding: state.rects.reference.width,
}));

inline((state) => ({
  padding: state.rects.reference.width,
}));