@floating-ui/react

TypesSource
Search for an npm package

@floating-ui/react

decl
module "@floating-ui/react" {

FloatingArrowProps

decl
export interface FloatingArrowProps extends React.SVGAttributes<SVGSVGElement> {
context: FloatingContext;

Width of the arrow.

more
less

@default — 14

width?: number;

Height of the arrow.

more
less

@default — 7

height?: number;

The corner radius (rounding) of the arrow tip.

more
less

@default — 0 (sharp)

tipRadius?: number;

Forces a static offset over dynamic positioning under a certain condition.

staticOffset?: string | number | null;

Custom path string.

d?: string;

Stroke (border) color of the arrow.

stroke?: string;

Stroke (border) width of the arrow.

strokeWidth?: number;
}

FloatingFocusManagerProps

decl
export interface FloatingFocusManagerProps<RT extends ReferenceType = ReferenceType> {
context: FloatingContext<RT>;
children: Element;
disabled?: boolean;
order?: "reference" | "floating" | "content"[];
initialFocus?: number | MutableRefObject<HTMLElement | null>;
guards?: boolean;
returnFocus?: boolean;
modal?: boolean;
visuallyHiddenDismiss?: boolean | string;
closeOnFocusOut?: boolean;
}

UseClickProps

decl
export interface UseClickProps {
enabled?: boolean;
event?: "click" | "mousedown";
toggle?: boolean;
ignoreMouse?: boolean;
keyboardHandlers?: boolean;
}

UseClientPointProps

decl
export interface UseClientPointProps {
enabled?: boolean;
axis?: "x" | "y" | "both";
x?: number | null;
y?: number | null;
}

UseDismissProps

decl
export interface UseDismissProps {
enabled?: boolean;
escapeKey?: boolean;
referencePress?: boolean;
referencePressEvent?: "pointerdown" | "mousedown" | "click";
outsidePress?: boolean | ((event: MouseEvent) => boolean);
outsidePressEvent?: "pointerdown" | "mousedown" | "click";
ancestorScroll?: boolean;
bubbles?: boolean | {
escapeKey?: boolean;
outsidePress?: boolean;
};
}

UseFocusProps

decl
export interface UseFocusProps {
enabled?: boolean;
keyboardOnly?: boolean;
}

UseHoverProps

decl
export interface UseHoverProps<RT extends ReferenceType = ReferenceType> {
enabled?: boolean;
handleClose?: HandleCloseFn<RT> | null;
restMs?: number;
delay?: number | Partial<{
open: number;
close: number;
}>;
mouseOnly?: boolean;
move?: boolean;
}
Unexported symbols referenced here

HandleCloseFn

decl
interface HandleCloseFn<RT extends ReferenceType = ReferenceType> {
(context: FloatingContext<RT> & {
onClose: () => void;
tree?: FloatingTreeType<RT> | null;
leave?: boolean;
}): (event: MouseEvent) => void;
__options: {
blockPointerEvents: boolean;
};
}
Referenced by
  • UseHoverProps

UseListNavigationProps

decl
export interface UseListNavigationProps {
listRef: MutableRefObject<HTMLElement | null[]>;
activeIndex: number | null;
onNavigate?: (index: number | null) => void;
enabled?: boolean;
selectedIndex?: number | null;
focusItemOnOpen?: boolean | "auto";
focusItemOnHover?: boolean;
openOnArrowKeyDown?: boolean;
disabledIndices?: number[];
allowEscape?: boolean;
loop?: boolean;
nested?: boolean;
rtl?: boolean;
virtual?: boolean;
orientation?: "vertical" | "horizontal" | "both";
cols?: number;
scrollItemIntoView?: boolean | ScrollIntoViewOptions;
}

UseRoleProps

decl
export interface UseRoleProps {
enabled?: boolean;
role?: "tooltip" | "dialog" | "alertdialog" | "menu" | "listbox" | "grid" | "tree";
}

UseTransitionStatusProps

decl
export interface UseTransitionStatusProps {
duration?: number | Partial<{
open: number;
close: number;
}>;
}
Referenced by

UseTransitionStylesProps

decl
export interface UseTransitionStylesProps extends UseTransitionStatusProps {
initial?: CSSStylesProperty;
open?: CSSStylesProperty;
close?: CSSStylesProperty;
common?: CSSStylesProperty;
}
Unexported symbols referenced here

CSSStylesProperty

decl
type CSSStylesProperty = CSSProperties | ((params: {
side: Side;
placement: Placement;
}) => CSSProperties)
Referenced by

UseTypeaheadProps

decl
export interface UseTypeaheadProps {
listRef: MutableRefObject<string | null[]>;
activeIndex: number | null;
onMatch?: (index: number) => void;
onTypingChange?: (isTyping: boolean) => void;
enabled?: boolean;
findMatch?: null | ((list: string | null[], typedString: string) => string | null | undefined);
resetMs?: number;
ignoreKeys?: string[];
selectedIndex?: number | null;
}

InnerProps

decl
export interface InnerProps {
listRef: MutableRefObject<HTMLElement | null[]>;
index: number;
onFallbackChange?: null | ((fallback: boolean) => void);
offset?: number;
overflowRef?: MutableRefObject<SideObject | null>;
scrollRef?: MutableRefObject<HTMLElement | null>;
minItemsVisible?: number;
referenceOverflowThreshold?: number;
}

UseInnerOffsetProps

decl
export interface UseInnerOffsetProps {
enabled?: boolean;
overflowRef: MutableRefObject<SideObject | null>;
scrollRef?: MutableRefObject<HTMLElement | null>;
onChange: (offset: number | ((offset: number) => number)) => void;
}
export {
AlignedPlacement,
Alignment,
} from "unknown"

ArrowOptions

decl
export interface ArrowOptions {

The arrow element to be positioned.

more
less

@default — undefined

element: MutableRefObject<Element | null> | Element | null;

The padding between the arrow element and the floating element edges. Useful when the floating element has rounded corners.

more
less

@default — 0

padding?: Padding | undefined;
}
Referenced by
export {
AutoPlacementOptions,
AutoUpdateOptions,
Axis,
Boundary,
ClientRectObject,
ComputePositionConfig,
ComputePositionReturn,
Coords,
DetectOverflowOptions,
Dimensions,
ElementContext,
ElementRects,
Elements,
FlipOptions,
FloatingElement,
HideOptions,
InlineOptions,
Length,
Middleware,
MiddlewareArguments,
MiddlewareData,
MiddlewareReturn,
MiddlewareState,
NodeScroll,
OffsetOptions,
Padding,
Placement,
Platform,
Rect,
ReferenceElement,
RootBoundary,
ShiftOptions,
Side,
SideObject,
SizeOptions,
Strategy,
VirtualElement,
} from "unknown"

arrow

decl

Provides data to position an inner element of the floating element so that it appears centered to the reference element. This wraps the core arrow middleware to allow React refs as the element.

more
less

@see — ://floating-ui.com/docs/arrow

export const arrow: (options: ArrowOptions | Derivable<ArrowOptions>, deps?: DependencyList) => Middleware = ...

autoPlacement

decl

Optimizes the visibility of the floating element by choosing the placement that has the most space available automatically, without needing to specify a preferred placement. Alternative to flip.

more
less

@see — ://floating-ui.com/docs/autoPlacement

export const autoPlacement: (options?: AutoPlacementOptions | Derivable<AutoPlacementOptions>, deps?: DependencyList) => Middleware = ...
export {
autoUpdate,
computePosition,
detectOverflow,
} from "unknown"

flip

decl

Optimizes the visibility of the floating element by flipping the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. Alternative to autoPlacement.

more
less

@see — ://floating-ui.com/docs/flip

export const flip: (options?: FlipOptions | Derivable<FlipOptions>, deps?: DependencyList) => Middleware = ...
export {
getOverflowAncestors,
} from "unknown"

hide

decl

Provides data to hide the floating element in applicable situations, such as when it is not in the same clipping context as the reference element.

more
less

@see — ://floating-ui.com/docs/hide

export const hide: (options?: HideOptions | Derivable<HideOptions>, deps?: DependencyList) => Middleware = ...

inline

decl

Provides improved positioning for inline reference elements that can span over multiple lines, such as hyperlinks or range selections.

more
less

@see — ://floating-ui.com/docs/inline

export const inline: (options?: InlineOptions | Derivable<InlineOptions>, deps?: DependencyList) => Middleware = ...

limitShift

decl

Built-in limiter that will stop shift() at a certain point.

export const limitShift: (options?: LimitShiftOptions | Derivable<LimitShiftOptions>, deps?: DependencyList) => {
fn: (state: MiddlewareState) => Coords;
options: any;
} = ...

offset

decl

Modifies the placement by translating the floating element along the specified axes. A number (shorthand for mainAxis or distance), or an axes configuration object may be passed.

more
less

@see — ://floating-ui.com/docs/offset

export const offset: (options?: OffsetOptions, deps?: DependencyList) => Middleware = ...
export {
platform,
} from "unknown"

shift

decl

Optimizes the visibility of the floating element by shifting it in order to keep it in view when it will overflow the clipping boundary.

more
less

@see — ://floating-ui.com/docs/shift

export const shift: (options?: ShiftOptions | Derivable<ShiftOptions>, deps?: DependencyList) => Middleware = ...

size

decl

Provides data that allows you to change the size of the floating element — for instance, prevent it from overflowing the clipping boundary or match the width of the reference element.

more
less

@see — ://floating-ui.com/docs/size

export const size: (options?: SizeOptions | Derivable<SizeOptions>, deps?: DependencyList) => Middleware = ...

NarrowedElement

decl
export type NarrowedElement<T> = T extends Element ? T : Element
Referenced by

ExtendedRefs

decl
export interface ExtendedRefs<RT> {
reference: MutableRefObject<ReferenceType | null>;
floating: MutableRefObject<HTMLElement | null>;
domReference: MutableRefObject<NarrowedElement<RT> | null>;
setReference: (node: RT | null) => void;
setFloating: (node: HTMLElement | null) => void;
setPositionReference: (node: ReferenceType | null) => void;
}
Referenced by

ExtendedElements

decl
export interface ExtendedElements<RT> {
reference: ReferenceType | null;
floating: HTMLElement | null;
domReference: NarrowedElement<RT> | null;
}
Referenced by

FloatingEvents

decl
export interface FloatingEvents {
emit<T extends string>(event: T, data?: T extends "dismiss" ? DismissPayload : any): void;
on(event: string, handler: (data: any) => void): void;
off(event: string, handler: (data: any) => void): void;
}
Referenced by
Unexported symbols referenced here

DismissPayload

decl
interface DismissPayload {
type: "outsidePress" | "referencePress" | "escapeKey" | "mouseLeave";
data: {
returnFocus: boolean | {
preventScroll: boolean;
};
};
}
Referenced by

ContextData

decl
export interface ContextData {
openEvent?: Event;

@deprecated — use onTypingChange prop in useTypeahead

typing?: boolean;
[key: string]: any;
}
Referenced by

FloatingContext

decl
export type FloatingContext<RT extends ReferenceType = ReferenceType> = Omit<UseFloatingReturn<RT>, "refs" | "elements"> & {
open: boolean;
onOpenChange: (open: boolean, event?: Event) => void;
events: FloatingEvents;
dataRef: MutableRefObject<ContextData>;
nodeId: string | undefined;
floatingId: string;
refs: ExtendedRefs<RT>;
elements: ExtendedElements<RT>;
}
Referenced by
Unexported symbols referenced here

UseFloatingReturn

decl
type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Prettify<UseFloatingData & {

Update the position of the floating element, re-rendering the component if required.

update: () => void;

Pre-configured positioning styles to apply to the floating element.

floatingStyles: CSSProperties;

Object containing the reference and floating refs and reactive setters.

refs: {

A React ref to the reference element.

reference: MutableRefObject<RT | null>;

A React ref to the floating element.

floating: MutableRefObject<HTMLElement | null>;

A callback to set the reference element (reactive).

setReference: (node: RT | null) => void;

A callback to set the floating element (reactive).

setFloating: (node: HTMLElement | null) => void;
};

Object containing the reference and floating elements.

elements: {
reference: RT | null;
floating: HTMLElement | null;
};
}>
Referenced by

ReferenceType

decl
type ReferenceType = Element | VirtualElement
Referenced by

Prettify

decl
type Prettify<T> = {
[K in keyof T]: T[K];
} & {}
Referenced by

UseFloatingData

decl
type UseFloatingData = Prettify<ComputePositionReturn & {
isPositioned: boolean;
}>
Referenced by

FloatingNodeType

decl
export interface FloatingNodeType<RT extends ReferenceType = ReferenceType> {
id: string;
parentId: string | null;
context?: FloatingContext<RT>;
}
Referenced by

FloatingTreeType

decl
export interface FloatingTreeType<RT extends ReferenceType = ReferenceType> {
nodesRef: MutableRefObject<FloatingNodeType<RT>[]>;
events: FloatingEvents;
addNode: (node: FloatingNodeType) => void;
removeNode: (node: FloatingNodeType) => void;
}
Referenced by

ElementProps

decl
export interface ElementProps {
reference?: HTMLProps<Element>;
floating?: HTMLProps<HTMLElement>;
item?: HTMLProps<HTMLElement>;
}

UseFloatingData

decl
export type UseFloatingData = Prettify<UseFloatingReturn>
Unexported symbols referenced here

Prettify

decl
type Prettify<T> = {
[K in keyof T]: T[K];
} & {}
Referenced by

UseFloatingReturn

decl
export type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Prettify<UseFloatingReturn & {
context: Prettify<FloatingContext<RT>>;
refs: ExtendedRefs<RT>;
elements: ExtendedElements<RT>;
}>
Referenced by

UseFloatingOptions

decl
export interface UseFloatingOptions<RT extends ReferenceType = ReferenceType> extends UseFloatingOptions<RT> {
onOpenChange?: (open: boolean, event?: Event) => void;
nodeId?: string;
}
Unexported symbols referenced here

UseFloatingOptions

decl
type UseFloatingOptions<RT extends ReferenceType = ReferenceType> = Prettify<Partial<ComputePositionConfig> & {

A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass autoUpdate).

whileElementsMounted?: ((reference: RT, floating: HTMLElement, update: () => void) => () => void) | undefined;

Object containing the reference and floating elements.

elements?: {
reference?: RT | null | undefined;
floating?: HTMLElement | null | undefined;
} | undefined;

The open state of the floating element to synchronize with the isPositioned value.

more
less

@default — false

open?: boolean | undefined;

Whether to use transform for positioning instead of top and left (layout) in the floatingStyles object.

more
less

@default — true

transform?: boolean | undefined;
}>
Referenced by
}