• Version 3.17.0
  • Published
  • 402 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 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.


                                              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 (26)

                                                      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>