hide

A data provider that allows you to hide the floating element in applicable situations.

<ShowFor packages={['core']}>

import {hide} from '@floating-ui/core';

<ShowFor packages={['dom']}>

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

<ShowFor packages={['react']}>

import {hide} from '@floating-ui/react';

<ShowFor packages={['react-dom']}>

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

<ShowFor packages={['vue']}>

import {hide} from '@floating-ui/vue';

<ShowFor packages={['react-native']}>

import {hide} from '@floating-ui/react-native';

This is useful for situations where you want to hide the floating element because it appears detached from the reference element (or attached to nothing).

In the above example, the floating element turns partially transparent once it has escaped{:.key} the reference element's clipping context. Once the reference element is hidden, it hides itself.

Usage

Apply a hidden visibility style to the floating element based on the data in middlewareData.hide{:js}:

<ShowFor packages={['core', 'dom']}>

computePosition(referenceEl, floatingEl, {
  middleware: [hide()],
}).then(({middlewareData}) => {
  if (middlewareData.hide) {
    Object.assign(floatingEl.style, {
      visibility: middlewareData.hide.referenceHidden
        ? 'hidden'
        : 'visible',
    });
  }
});

<ShowFor packages={['react', 'react-dom', 'react-native']}>

const {refs, floatingStyles, middlewareData} = useFloating({
  middleware: [hide()],
});

return (
  <div
    ref={refs.setFloating}
    style={{
      ...floatingStyles,
      visibility: middlewareData.hide?.referenceHidden
        ? 'hidden'
        : 'visible',
    }}
  />
);

<ShowFor packages={['vue']}>

<script setup>
const reference = ref(null);
const floating = ref(null);
const {floatingStyles, middlewareData} = useFloating(
  reference,
  floating,
  {
    middleware: [hide()],
  },
);
</script>

<template>
  <div ref="reference"></div>
  <div
    ref="floating"
    :style="{
      ...floatingStyles,
      visibility: middlewareData.hide?.referenceHidden
        ? 'hidden'
        : 'visible',
    }"
  ></div>
</template>

Order

hide(){:js} should generally be placed at the end of your middleware array.

Options

These are the options you can pass to hide(){:js}.

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

strategy{:.key}

default: 'referenceHidden'{:js}

The strategy used to determine when to hide the floating element.

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

If you'd like to use multiple strategies, call hide(){:js} 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
});

Deriving options from state

You can derive the options from the middleware lifecycle state:

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

Data

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

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

referenceHidden{:.key}

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{:.key}

A side object containing overflow offsets.

escaped{:.key}

Determines whether the floating element has "escaped" the reference's clipping context and appears fully detached from it.

escapedOffsets{:.key}

A side object containing overflow offsets.