hide

A data provider that allows you to hide the floating element in applicable situations, usually when it’s not within the same clipping context as the reference element.

Scroll up

In the above example, the floating element turns red once it has escapedescaped the reference element’s clipping context. Once the reference element is hidden, it hides itself.

Usage

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',
  });
});

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',
  });
});

Order

hide()hide() should generally be placed at the end of your middleware array.

Options

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

interface Options extends DetectOverflowOptions {
  strategy?: 'referenceHidden' | 'escaped';
}

interface Options extends DetectOverflowOptions {
  strategy?: 'referenceHidden' | 'escaped';
}

strategy

default: 'referenceHidden''referenceHidden'

Specifies the type of hiding strategy to use.

hide({strategy: 'escaped'}); // 'referenceHidden' by default

hide({strategy: 'escaped'}); // 'referenceHidden' by default

If you’d like to use multiple strategies, call hide()hide() multiple times in your middleware array with different options.

…detectOverflowOptions

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

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

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

Data

interface Data {
  referenceHidden?: boolean;
  referenceHiddenOffsets?: SideObject;
  escaped?: boolean;
  escapedOffsets?: SideObject;
}

interface Data {
  referenceHidden?: boolean;
  referenceHiddenOffsets?: SideObject;
  escaped?: boolean;
  escapedOffsets?: SideObject;
}

Depending on the strategy used, these options may exist in the data object.

referenceHidden

Determines whether the reference element is fully clipped, and is therefore hidden from view.

Note that “hidden” means clipping, visibility and opacity styles are not considered.

referenceHiddenOffsets

A side object containing overflow offsets.

escaped

Determines whether the floating element has “escaped” the reference’s clipping context and appears fully detached from it.

escapedOffsets

A side object containing overflow offsets.