• Version 3.14.2
  • Published
  • 317 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 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 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 (25)

                                                  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>