@react-aria/utils

Variables

• useLayoutEffect

Functions

• chain()
• filterDOMProps()
• focusWithoutScrolling()
• getOffset()
• getScrollParent()
• isAndroid()
• isAppleDevice()
• isChrome()
• isIOS()
• isIPad()
• isIPhone()
• isMac()
• isScrollable()
• isVirtualClick()
• isVirtualPointerEvent()
• isWebKit()
• mergeIds()
• mergeProps()
• mergeRefs()
• runAfterTransition()
• scrollIntoView()
• scrollIntoViewport()
• useDescription()
• useDrag1D()
• useEffectEvent()
• useEvent()
• useGlobalListeners()
• useId()
• useLabels()
• useObjectRef()
• useResizeObserver()
• useSlotId()
• useSyncRef()
• useUpdateEffect()
• useValueEffect()
• useViewportSize()

variable useLayoutEffect

const useLayoutEffect: any;

function chain

chain: (...callbacks: any[]) => (...args: any[]) => void;

• Calls all functions in the order they were chained with the same arguments.

function filterDOMProps

filterDOMProps: (
    props: DOMProps & AriaLabelingProps,
    opts?: Options
) => DOMProps & AriaLabelingProps;

• Filters out all props that aren't valid DOM props or defined via override prop obj.

  Parameter props

  The component props to be filtered.

  Parameter opts

  Props to override.

function focusWithoutScrolling

focusWithoutScrolling: (element: FocusableElement) => void;

function getOffset

getOffset: (element: any, reverse: any, orientation?: string) => any;

function getScrollParent

getScrollParent: (node: Element) => Element;

function isAndroid

isAndroid: () => any;

function isAppleDevice

isAppleDevice: () => boolean;

function isChrome

isChrome: () => any;

function isIOS

isIOS: () => boolean;

function isIPad

isIPad: () => boolean;

function isIPhone

isIPhone: () => boolean;

function isMac

isMac: () => boolean;

function isScrollable

isScrollable: (node: Element) => boolean;

function isVirtualClick

isVirtualClick: (event: MouseEvent | PointerEvent) => boolean;

function isVirtualPointerEvent

isVirtualPointerEvent: (event: PointerEvent) => boolean;

function isWebKit

isWebKit: () => boolean;

function mergeIds

mergeIds: (idA: string, idB: string) => string;

• Merges two ids. Different ids will trigger a side-effect and re-render components hooked up with useId.

function mergeProps

mergeProps: <T extends Props[]>(
    ...args: T
) => UnionToIntersection<TupleTypes<T>>;

• Merges multiple props objects together. Event handlers are chained, classNames are combined, and ids are deduplicated - different ids will trigger a side-effect and re-render components hooked up with useId. For all other props, the last prop object overrides all previous ones.

  Parameter args

  Multiple sets of props to merge together.

function mergeRefs

mergeRefs: <T>(...refs: ForwardedRef<T>[]) => ForwardedRef<T>;

• Merges multiple refs into one. Works with either callback or object refs.

function runAfterTransition

runAfterTransition: (fn: () => void) => void;

function scrollIntoView

scrollIntoView: (scrollView: HTMLElement, element: HTMLElement) => void;

• Scrolls scrollView so that element is visible. Similar to element.scrollIntoView({block: 'nearest'}) (not supported in Edge), but doesn't affect parents above scrollView.

function scrollIntoViewport

scrollIntoViewport: (
    targetElement: Element,
    opts?: ScrollIntoViewportOpts
) => void;

• Scrolls the targetElement so it is visible in the viewport. Accepts an optional opts.containingElement that will be centered in the viewport prior to scrolling the targetElement into view. If scrolling is prevented on the body (e.g. targetElement is in a popover), this will only scroll the scroll parents of the targetElement up to but not including the body itself.

function useDescription

useDescription: (description: string) => AriaLabelingProps;

function useDrag1D

useDrag1D: (props: UseDrag1DProps) => HTMLAttributes<HTMLElement>;

function useEffectEvent

useEffectEvent: (fn: any) => any;

function useEvent

useEvent: <K extends keyof GlobalEventHandlersEventMap>(
    ref: RefObject<EventTarget>,
    event: K,
    handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions
) => void;

function useGlobalListeners

useGlobalListeners: () => GlobalListeners;

function useId

useId: (defaultId?: string) => string;

• If a default is not provided, generate an id.

  Parameter defaultId

  Default component id.

function useLabels

useLabels: (
    props: DOMProps & AriaLabelingProps,
    defaultLabel?: string
) => DOMProps & AriaLabelingProps;

• Merges aria-label and aria-labelledby into aria-labelledby when both exist.

  Parameter props

  Aria label props.

  Parameter defaultLabel

  Default value for aria-label when not present.

function useObjectRef

useObjectRef: <T>(forwardedRef?: any) => MutableRefObject<T>;

• Offers an object ref for a given callback ref or an object ref. Especially helfpul when passing forwarded refs (created using React.forwardRef) to React Aria Hooks.

  Parameter forwardedRef

  The original ref intended to be used.

  Returns

  An object ref that updates the given ref.

  See Also

  • https://reactjs.org/docs/forwarding-refs.html

function useResizeObserver

useResizeObserver: <T extends Element>(
    options: useResizeObserverOptionsType<T>
) => void;

function useSlotId

useSlotId: (depArray?: ReadonlyArray<any>) => string;

• Used to generate an id, and after render, check if that id is rendered so we know if we can use it in places such as labelledby.

  Parameter depArray

  When to recalculate if the id is in the DOM.

function useSyncRef

useSyncRef: <T>(context: ContextValue<T>, ref: RefObject<T>) => void;

function useUpdateEffect

useUpdateEffect: (effect: EffectCallback, dependencies: any[]) => void;

function useValueEffect

useValueEffect: <S>(
    defaultValue: S | (() => S)
) => [S, Dispatch<SetValueAction<S>>];

function useViewportSize

useViewportSize: () => ViewportSize;