# hide

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

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

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

<Notice>
  In the above example, the floating element turns red once it has
  `escaped{:.objectKey}` the reference element's clipping context.
  Once the reference element is hidden, it hides itself.
</Notice>

## Usage

```js
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(){: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 Options extends DetectOverflowOptions {
  strategy?: 'referenceHidden' | 'escaped';
}
```

### strategy

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

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.