UNPKG

2.54 kBTypeScriptView Raw
1import * as Popper from '@popperjs/core';
2declare type OptionsWithUndefined<T extends Popper.Obj | undefined> = T extends Popper.Obj ? T : Popper.Obj;
3export declare type Modifier<Name, Options extends Popper.Obj | undefined> = Popper.Modifier<Name, OptionsWithUndefined<Options>>;
4export declare type Options = Popper.Options;
5export declare type Instance = Popper.Instance;
6export declare type Placement = Popper.Placement;
7export declare type VirtualElement = Popper.VirtualElement;
8export declare type State = Popper.State;
9export declare type OffsetValue = [
10 number | null | undefined,
11 number | null | undefined
12];
13export declare type OffsetFunction = (details: {
14 popper: Popper.Rect;
15 reference: Popper.Rect;
16 placement: Placement;
17}) => OffsetValue;
18export declare type Offset = OffsetFunction | OffsetValue;
19export declare type ModifierMap = Record<string, Partial<Modifier<any, any>>>;
20export declare type Modifiers = Popper.Options['modifiers'] | Record<string, Partial<Modifier<any, any>>>;
21export declare type UsePopperOptions = Omit<Options, 'modifiers' | 'placement' | 'strategy'> & {
22 enabled?: boolean;
23 placement?: Options['placement'];
24 strategy?: Options['strategy'];
25 modifiers?: Options['modifiers'];
26};
27export interface UsePopperState {
28 placement: Placement;
29 update: () => void;
30 forceUpdate: () => void;
31 attributes: Record<string, Record<string, any>>;
32 styles: Record<string, Partial<CSSStyleDeclaration>>;
33 state?: State;
34}
35/**
36 * Position an element relative some reference element using Popper.js
37 *
38 * @param referenceElement
39 * @param popperElement
40 * @param {object} options
41 * @param {object=} options.modifiers Popper.js modifiers
42 * @param {boolean=} options.enabled toggle the popper functionality on/off
43 * @param {string=} options.placement The popper element placement relative to the reference element
44 * @param {string=} options.strategy the positioning strategy
45 * @param {boolean=} options.eventsEnabled have Popper listen on window resize events to reposition the element
46 * @param {function=} options.onCreate called when the popper is created
47 * @param {function=} options.onUpdate called when the popper is updated
48 *
49 * @returns {UsePopperState} The popper state
50 */
51declare function usePopper(referenceElement: VirtualElement | null | undefined, popperElement: HTMLElement | null | undefined, { enabled, placement, strategy, modifiers, ...config }?: UsePopperOptions): UsePopperState;
52export default usePopper;