hide
A data provider that allows you to hide the floating element in applicable situations.
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).
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'
The strategy used to determine when to hide the floating element.
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
});
Deriving options from state
You can derive the options from the middleware lifecycle state:
hide((state) => ({
padding: state.rects.reference.width,
}));
hide((state) => ({
padding: state.rects.reference.width,
}));
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.