• Version 3.23.2
  • Published
  • 472 kB
  • 5 dependencies
  • Apache-2.0 license


npm i @react-aria/utils
yarn add @react-aria/utils
pnpm add @react-aria/utils


Spectrum UI components in React



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 & LinkDOMProps,
    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 getOwnerDocument

        getOwnerDocument: (el: Element | null | undefined) => Document;

          function getOwnerWindow

          getOwnerWindow: (
          el: (Window & typeof global) | Element | null | undefined
          ) => Window & typeof global;

            function getScrollParent

            getScrollParent: (node: Element, checkForOverflow?: boolean) => Element;

              function isAndroid

              isAndroid: () => any;

                function isAppleDevice

                isAppleDevice: () => boolean;

                  function isChrome

                  isChrome: () => any;

                    function isFirefox

                    isFirefox: () => any;

                      function isIOS

                      isIOS: () => boolean;

                        function isIPad

                        isIPad: () => boolean;

                          function isIPhone

                          isIPhone: () => boolean;

                            function isMac

                            isMac: () => boolean;

                              function isScrollable

                              isScrollable: (node: Element, checkForOverflow?: boolean) => 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 useDeepMemo

                                        useDeepMemo: <T>(value: T, isEqual: (a: T, b: T) => boolean) => T;

                                          function useDescription

                                          useDescription: (description?: string) => AriaLabelingProps;

                                            function useDrag1D

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

                                              function useEffectEvent

                                              useEffectEvent: <T extends Function>(fn?: T) => T;

                                                function useEvent

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

                                                  function useFormReset

                                                  useFormReset: <T>(
                                                  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
                                                  initialValue: T,
                                                  onReset: (value: T) => void
                                                  ) => 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.


                                                        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> | null, 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;

                                                                Package Files (29)

                                                                Dependencies (5)

                                                                Dev Dependencies (0)

                                                                No dev dependencies.

                                                                Peer Dependencies (1)


                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-aria/utils.

                                                                • Markdown
                                                                • HTML
                                                                  <a href="https://www.jsdocs.io/package/@react-aria/utils"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>