• Version 3.13.3
  • Published
  • 286 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,
    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 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 useDescription

                            useDescription: (description: string) => AriaLabelingProps;

                              function useDrag1D

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

                                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.


                                      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;

                                              Package Files (24)

                                              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>