API reference
Interfaces
useOverlay is a low level hook for building overlays for every needs.
useOverlay(props: IOverlay): IOverlayReturn
export interface IOverlay { // aria attribute role?: 'tooltip' | 'dialog' | 'menu' | 'listbox' | 'grid' | 'tree'; // for nested overlays nodeId?: string; // for nested overlays parentId?: string; // actual DOM id attribute portalId?: string; // for overlay placement (use custom for modal, drawer etc.) placement?: 'top' | 'bottom' | 'right' |'left' | 'bottom-end' | 'bottom-start' | 'left-end' | 'left-start' | 'right-end' | 'right-start' | 'top-end' | 'top-start'; // triggers wont't work if you don't pass this true. interactive?: boolean; // determines if animations are enabled or not animations?: { open: Variant; // framer-motion type close: Variant; // framer-motion type }; // determines if animations are enabled or not (AnimatePresence) useMotion?: boolean; // portals your floating element outside the main app node usePortal?: boolean; // provides base styling for a fixed overlay element to dim content useBackdrop?: boolean; // provides flexible focus management for a floating element useFocusManager?: boolean; // determines if focus should be returned to previous element // useFocusManager should be true for this to work returnFocus?: boolean; // displaces the floating element from its core placement along the specified axes offset?: number; // moves the floating element along the specified px in order to keep it in view shift?: number; // trigger delay delay?: { open: number; close: number; }; // trigger element events use?: { click?: boolean; // adds click event listeners dismiss?: boolean; // adds listeners that dismiss (close the floating element. focus?: boolean; // adds focus event listeners hover?: boolean; // adds hover event listeners }; // your floating element (overlay) overlay: (close: () => void) => JSX.Element; // classes for floating element className?: string; // classes for floating element wrapper wrapperClassName?: string; // classes for floating element backdrop backdropClassName?: string;}
IOverlayReturn
export interface IOverlayReturn { // the state of the overlay open: boolean; // the state setter for the overlay setOpen: React.Dispatch<React.SetStateAction<boolean>>; // trigger element props triggerProps: Record<string, unknown>; // the floating element (overlay) for rendering overlay: JSX.Element;}