FezVrasta/popper.js

<PageCard>

# hide

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

<MiddlewareContainer>
  <MiddlewareBadge type="Data Provider" />
</MiddlewareContainer>

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

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

</ShowFor>

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

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

</ShowFor>

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

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

</ShowFor>

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

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

</ShowFor>

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

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

</ShowFor>

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

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

</ShowFor>

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).

</PageCard>

<div className="flex flex-col gap-4">
  <Chrome
    label="Scroll up"
    center
    scrollable="y"
    className="h-96"
    scrollHeight={325}
  >
    <Floating
      portaled
      middleware={[{name: 'offset', options: 5}, {name: 'hide'}]}
    >
      <div className="grid h-32 w-32 place-items-center border-2 border-dashed border-gray-1000" />
    </Floating>
  </Chrome>
</div>

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']}>

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

</ShowFor>

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

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

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

</ShowFor>

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

```vue /middlewareData/
<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>
```

</ShowFor>

## 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}`.

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

### `strategy{:.key}`

default: `'referenceHidden'{:js}`

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

```js
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`](/docs/detectOverflow#options)'s options
can be passed. For instance:

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

### Deriving options from state

You can derive the options from the
[middleware lifecycle state](/docs/middleware#middlewarestate):

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

## Data

```ts
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.