@react-aria/utils

@react-aria/utils

Version 3.30.1
Published 20 days ago
809 kB
6 dependencies
Apache-2.0 license

Install

npm i @react-aria/utils

yarn add @react-aria/utils

pnpm add @react-aria/utils

Overview

Spectrum UI components in React

Index

Variables

variable CLEAR_FOCUS_EVENT

const CLEAR_FOCUS_EVENT: string;

variable FOCUS_EVENT

const FOCUS_EVENT: string;

variable useLayoutEffect

const useLayoutEffect: any;

Functions

function chain

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

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

function createShadowTreeWalker

createShadowTreeWalker: (
    doc: Document,
    root: Node,
    whatToShow?: number,
    filter?: NodeFilter | null
) => TreeWalker;

ShadowDOM safe version of document.createTreeWalker.

function filterDOMProps

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

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 getActiveElement

getActiveElement: (doc?: Document) => Element | null;

ShadowDOM safe version of document.activeElement.

function getEventTarget

getEventTarget: <T extends Event>(event: T) => Element;

ShadowDOM safe version of event.target.

function getOffset

getOffset: (
    element: HTMLElement,
    reverse?: boolean,
    orientation?: Orientation
) => number;

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 getScrollParents

getScrollParents: (node: Element, checkForOverflow?: boolean) => Element[];

function inertValue

inertValue: (value?: boolean) => string | boolean | undefined;

function isAndroid

isAndroid: () => boolean;

function isAppleDevice

isAppleDevice: () => boolean;

function isChrome

isChrome: () => boolean;

function isFirefox

isFirefox: () => boolean;

function isFocusable

isFocusable: (element: Element) => boolean;

function isIOS

isIOS: () => boolean;

function isIPad

isIPad: () => boolean;

function isIPhone

isIPhone: () => boolean;

function isMac

isMac: () => boolean;

function isScrollable

isScrollable: (node: Element | null, checkForOverflow?: boolean) => boolean;

function isShadowRoot

isShadowRoot: (node: Node | null) => node is ShadowRoot;

Type guard that checks if a node is a ShadowRoot. Uses nodeType and host property checks to distinguish ShadowRoot from other DocumentFragments.

function isTabbable

isTabbable: (element: 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: Array<Ref<T> | MutableRefObject<T> | null | undefined>
) => Ref<T>;

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

function nodeContains

nodeContains: (
    node: Node | null | undefined,
    otherNode: Node | null | undefined
) => boolean;

ShadowDOM safe version of Node.contains.

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

UNSTABLE_useLoadMoreSentinel: (
    props: LoadMoreSentinelProps,
    ref: RefObject<HTMLElement>
) => void;

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 useEnterAnimation

useEnterAnimation: (ref: RefObject<HTMLElement>, isReady?: boolean) => boolean;

function useEvent

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

function useExitAnimation

useExitAnimation: (ref: RefObject<HTMLElement>, isOpen: boolean) => boolean;

function useFormReset

useFormReset: <T>(
    ref:
        | RefObject<
              HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null
          >
        | undefined,
    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 useLoadMore

useLoadMore: (props: LoadMoreProps, ref: RefObject<HTMLElement>) => void;

function useLoadMoreSentinel

useLoadMoreSentinel: (
    props: LoadMoreSentinelProps,
    ref: RefObject<HTMLElement>
) => void;

function useObjectRef

useObjectRef: <T>(ref?: 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 ref
The original ref intended to be used.
Returns
An object ref that updates the given ref.
See Also
- https://react.dev/reference/react/forwardRef

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 useUpdateLayoutEffect

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

function useValueEffect

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

function useViewportSize

useViewportSize: () => ViewportSize;

Classes

class ShadowTreeWalker

class ShadowTreeWalker implements TreeWalker {}

constructor

constructor(doc: Document, root: Node, whatToShow?: number, filter?: NodeFilter);

property currentNode

currentNode: Node;

property doc

readonly doc: Document;

property filter

readonly filter: NodeFilter;

property root

readonly root: Node;

property whatToShow

readonly whatToShow: number;

method firstChild

firstChild: () => Node | null;

method lastChild

lastChild: () => Node | null;

method nextNode

nextNode: () => Node | null;

method nextSibling

nextSibling: () => Node | null;

Deprecated

method parentNode

parentNode: () => Node | null;

Deprecated

method previousNode

previousNode: () => Node | null;

method previousSibling

previousSibling: () => Node | null;

Deprecated

Interfaces

interface LoadMoreSentinelProps

interface LoadMoreSentinelProps extends Omit<AsyncLoadable, 'isLoading'> {}

property collection

collection: Collection<any>;

property scrollOffset

scrollOffset?: number;

The amount of offset from the bottom of your scrollable region that should trigger load more. Uses a percentage value relative to the scroll body's client height. Load more is then triggered when your current scroll position's distance from the bottom of the currently loaded list of items is less than or equal to the provided value. (e.g. 1 = 100% of the scroll region's height). 1

Dependencies (6)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto 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

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@react-aria/utils)

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>

Updated 19 days ago.
Package analyzed in 2772 ms.
Missing or incorrect documentation? Open an issue for this package.

@react-aria/utils

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Variables

variable CLEAR_FOCUS_EVENT

variable FOCUS_EVENT

variable useLayoutEffect

Functions

function chain

function createShadowTreeWalker

function filterDOMProps

Parameter props

Parameter opts

function focusWithoutScrolling

function getActiveElement

function getEventTarget

function getOffset

function getOwnerDocument

function getOwnerWindow

function getScrollParent

function getScrollParents

function inertValue

function isAndroid

function isAppleDevice

function isChrome

function isFirefox

function isFocusable

function isIOS

function isIPad

function isIPhone

function isMac

function isScrollable

function isShadowRoot

function isTabbable

function isVirtualClick

function isVirtualPointerEvent

function isWebKit

function mergeIds

function mergeProps

Parameter args

function mergeRefs

function nodeContains

function runAfterTransition

function scrollIntoView

function scrollIntoViewport

function UNSTABLE_useLoadMoreSentinel

function useDeepMemo

function useDescription

function useDrag1D

function useEffectEvent

function useEnterAnimation

function useEvent

function useExitAnimation

function useFormReset

function useGlobalListeners

function useId

Parameter defaultId

function useLabels

Parameter props

Parameter defaultLabel

function useLoadMore

function useLoadMoreSentinel

function useObjectRef

Parameter ref

Returns

See Also

function useResizeObserver

function useSlotId

Parameter depArray

function useSyncRef

function useUpdateEffect

function useUpdateLayoutEffect

function useValueEffect

function useViewportSize

Classes