reablocks/dist/utils/Position/usePosition.d.ts

Component library for React

import { RefObject } from 'react';
import { Placement as FloatingUIPlacement, Middleware } from '@floating-ui/react';
export type Placement = FloatingUIPlacement;
export type Modifiers = Middleware[];
export type ReferenceProp = ReferenceObject | HTMLElement | RefObject<HTMLElement>;
export interface ReferenceObject {
    /** The top offset of the reference, in pixels. */
    top: number;
    /** The left offset of the reference, in pixels. */
    left: number;
    /** The height of the reference, in pixels. */
    height: number;
    /** The width of the reference, in pixels. */
    width: number;
}
export interface PositionOptions {
    /**
     * Element or virtual reference object to position against.
     */
    reference?: Element | ReferenceObject;
    /**
     * The floating element being positioned relative to the reference.
     */
    floating?: HTMLElement;
    /**
     * Preferred placement of the floating element relative to the reference.
     * @default 'top'
     */
    placement?: Placement;
    /**
     * Floating UI middleware applied when computing the position.
     * @default [flip(), shift({ limiter: limitShift() })]
     */
    modifiers?: Modifiers;
    /**
     * Track the cursor position as the reference instead of an element.
     */
    followCursor?: boolean;
}
/**
 * Hook for positioning an element relative to another.
 */
export declare const usePosition: ({ reference, floating, followCursor, placement, modifiers }?: PositionOptions) => {
    refs: {
        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType>;
        floating: React.MutableRefObject<HTMLElement | null>;
        setReference: (node: import('@floating-ui/react-dom').ReferenceType) => void;
        setFloating: (node: HTMLElement | null) => void;
    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
    anchorRef: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType> & import('react').MutableRefObject<import('@floating-ui/react').ReferenceType>;
    floatingRef: import('react').MutableRefObject<HTMLElement>;
    floatingStyles: import('react').CSSProperties;
    update: () => void;
};