autoPlacement

autoPlacement() chooses the placement automatically (the one with most space available).

Usage

import {computePosition, autoPlacement} from '@floating-ui/dom';
 
computePosition(referenceEl, floatingEl, {
  middleware: [autoPlacement()],
});

This cannot be used with flip().

Options

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

interface Options extends DetectOverflowOptions {
  alignment?: Alignment | null;
  autoAlignment?: boolean;
  allowedPlacements?: Array<Placement>;
}

alignment

default: null

Without options, autoPlacement() will choose any of the Side placements which fit best, i.e. 'top', 'right', 'bottom', or 'left'.

By specifying an alignment, it will choose those aligned placements.

autoPlacement({
  // top-start, right-start, bottom-start, left-start
  alignment: 'start',
});

autoAlignment

default: true

When alignment is specified, this describes whether to automatically choose placements with the opposite alignment if they fit better.

autoPlacement({
  alignment: 'start',
  // Won't also choose 'end' alignments if those fit better
  autoAlignment: false,
});

allowedPlacements

default: computed subset of ALL_PLACEMENTS

Describes the placements which are allowed to be chosen.

autoPlacement({
  // 'right' and 'left' won't be chosen
  allowedPlacements: ['top', 'bottom'],
});

...detectOverflowOptions

All of detectOverflow's options can be passed. For instance:

autoPlacement({padding: 5}); // 0 by default