@react-aria/utils

@react-aria/utils

Version 3.22.0
Published 20 days ago
465 kB
5 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

Variables

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 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) => 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 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.
Returns
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;

Dependencies (5)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

react

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 20 days ago.
Package analyzed in 3137 ms.
Missing or incorrect documentation? Open an issue for this package.

@react-aria/utils

Install

Overview

Index

Variables

Functions

Variables

variable useLayoutEffect

Functions

function chain

function filterDOMProps

Parameter props

Parameter opts

function focusWithoutScrolling

function getOffset

function getOwnerDocument

function getOwnerWindow

function getScrollParent

function isAndroid

function isAppleDevice

function isChrome

function isIOS

function isIPad

function isIPhone

function isMac

function isScrollable

function isVirtualClick

function isVirtualPointerEvent

function isWebKit

function mergeIds

function mergeProps

Parameter args

function mergeRefs

function runAfterTransition

function scrollIntoView

function scrollIntoViewport

function useDeepMemo

function useDescription

function useDrag1D

function useEffectEvent

function useEvent

function useFormReset

function useGlobalListeners

function useId

Parameter defaultId

function useLabels

Parameter props

Parameter defaultLabel

function useObjectRef

Parameter forwardedRef

Returns

See Also

function useResizeObserver

function useSlotId

Parameter depArray

function useSyncRef

function useUpdateEffect

function useValueEffect

function useViewportSize

Package Files (29)

Dependencies (5)

Dev Dependencies (0)

Peer Dependencies (1)

Badge