or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

date-time.mddrag-drop.mdfocus-management.mdform-controls.mdindex.mdinteractions.mdinternationalization.mdlayout-navigation.mdoverlays-modals.mdselection-controls.mdtags.mdtoast-notifications.mdutilities.md
tile.json

tessl/npm-react-aria

Comprehensive library of unstyled React hooks providing accessible UI primitives with full WAI-ARIA compliance and internationalization support.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-aria@3.43.x

To install, run

npx @tessl/cli install tessl/npm-react-aria@3.43.0

index.mddocs/

React Aria

React Aria is a comprehensive library of unstyled React hooks that provides accessible UI primitives for building design systems and component libraries. It implements accessibility and behavior according to WAI-ARIA Authoring Practices, offering full screen reader and keyboard navigation support tested across multiple browsers, devices, and platforms.

Package Information

  • Package Name: react-aria
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-aria

Core Imports

import { useButton, useTextField, useCheckbox } from "react-aria";

For CommonJS:

const { useButton, useTextField, useCheckbox } = require("react-aria");

Basic Usage

import React from "react";
import { useButton } from "react-aria";

function MyButton(props) {
  let ref = React.useRef();
  let { buttonProps } = useButton(props, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}

// Usage
<MyButton onPress={() => alert('Button pressed!')}>
  Click me
</MyButton>

Architecture

React Aria is built around several key design principles:

  • Unstyled Components: Provides behavior and accessibility without any visual styling
  • Hook-Based API: Uses React hooks following use* naming convention for all functionality
  • WAI-ARIA Compliance: Implements ARIA authoring practices for full accessibility support
  • Platform Adaptive: Handles mouse, touch, keyboard, and screen reader interactions appropriately
  • Type Safety: Full TypeScript support with comprehensive type definitions
  • Internationalization: Built-in support for 30+ languages with RTL layout and localized formatting
  • Meta-Package Structure: Aggregates focused hooks from individual @react-aria/* packages

Capabilities

Form Controls

Interactive form elements with full accessibility support including labels, validation, keyboard navigation, color inputs, progress indicators, and sliders.

function useButton(props: AriaButtonProps, ref: RefObject<Element>): ButtonAria;
function useToggleButton(props: AriaToggleButtonProps, ref: RefObject<Element>): ButtonAria;
function useToggleButtonGroup(props: AriaToggleButtonGroupProps, ref: RefObject<Element>): ToggleButtonGroupAria;
function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemProps, state: ToggleButtonGroupState, ref: RefObject<Element>): ButtonAria;
function useTextField(props: AriaTextFieldProps, ref: RefObject<Element>): TextFieldAria;
function useNumberField(props: AriaNumberFieldProps, ref: RefObject<Element>): NumberFieldAria;
function useSearchField(props: AriaSearchFieldProps, ref: RefObject<Element>): SearchFieldAria;
function useCheckbox(props: AriaCheckboxProps, ref: RefObject<Element>): CheckboxAria;
function useCheckboxGroup(props: AriaCheckboxGroupProps, ref: RefObject<Element>): CheckboxGroupAria;
function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: CheckboxGroupState, ref: RefObject<Element>): CheckboxAria;
function useRadio(props: AriaRadioProps, ref: RefObject<Element>): RadioAria;
function useRadioGroup(props: AriaRadioGroupProps, ref: RefObject<Element>): RadioGroupAria;
function useSwitch(props: AriaSwitchProps, ref: RefObject<Element>): SwitchAria;
function useColorArea(props: AriaColorAreaProps, ref: RefObject<Element>): ColorAreaAria;
function useColorChannelField(props: AriaColorChannelFieldProps, ref: RefObject<Element>): ColorChannelFieldAria;
function useColorField(props: AriaColorFieldProps, ref: RefObject<Element>): ColorFieldAria;
function useColorSlider(props: AriaColorSliderProps, ref: RefObject<Element>): ColorSliderAria;
function useColorSwatch(props: AriaColorSwatchProps, ref: RefObject<Element>): ColorSwatchAria;
function useColorWheel(props: AriaColorWheelOptions, ref: RefObject<Element>): ColorWheelAria;
function useProgressBar(props: AriaProgressBarProps, ref: RefObject<Element>): ProgressBarAria;
function useMeter(props: AriaMeterProps, ref: RefObject<Element>): MeterAria;
function useSlider(props: AriaSliderProps, ref: RefObject<Element>): SliderAria;
function useSliderThumb(props: AriaSliderThumbProps, state: SliderState, ref: RefObject<Element>): SliderThumbAria;
function useField(props: AriaFieldProps, ref: RefObject<Element>): FieldAria;
function useLabel(props: LabelAriaProps, ref: RefObject<Element>): LabelAria;

Form Controls

Selection Controls

Components for selecting from lists of options, including listboxes, comboboxes, and menus.

function useListBox(props: AriaListBoxProps, state: ListState<T>, ref: RefObject<Element>): ListBoxAria;
function useComboBox(props: AriaComboBoxProps, state: ComboBoxState<T>, ref: RefObject<Element>): ComboBoxAria;
function useSelect(props: AriaSelectProps, state: SelectState<T>, ref: RefObject<Element>): SelectAria;
function useMenu(props: AriaMenuProps, state: TreeState<T>, ref: RefObject<Element>): MenuAria;

Selection Controls

Date and Time

Date and time input components with internationalization and accessibility support.

function useDatePicker(props: AriaDatePickerProps, state: DatePickerState, ref: RefObject<Element>): DatePickerAria;
function useDateField(props: AriaDateFieldProps, state: DateFieldState, ref: RefObject<Element>): DateFieldAria;
function useCalendar(props: AriaCalendarProps, state: CalendarState, ref: RefObject<Element>): CalendarAria;
function useTimeField(props: AriaTimeFieldProps, state: TimeFieldState, ref: RefObject<Element>): TimeFieldAria;

Date and Time

Layout and Navigation

Components for organizing and navigating content including tabs, breadcrumbs, and tables.

function useTabList(props: AriaTabListProps, state: TabListState<T>, ref: RefObject<Element>): TabListAria;
function useBreadcrumbs(props: AriaBreadcrumbsProps, ref: RefObject<Element>): BreadcrumbsAria;
function useTable(props: AriaTableProps, state: TableState<T>, ref: RefObject<Element>): GridAria;
function useTree(props: AriaTreeProps, state: TreeState<T>, ref: RefObject<Element>): TreeAria;

Layout and Navigation

Overlays and Modals

Overlay components including dialogs, popovers, tooltips, and modals with proper focus management.

function useDialog(props: AriaDialogProps, ref: RefObject<Element>): DialogAria;
function usePopover(props: AriaPopoverProps, state: PopoverState, ref: RefObject<Element>): PopoverAria;
function useTooltip(props: AriaTooltipProps, state: TooltipTriggerState): TooltipAria;
function useModal(options?: AriaModalOptions): ModalAria;

Overlays and Modals

Interactions

Low-level interaction hooks for handling user input across different devices and interaction models.

function usePress(props: PressHookProps): PressResult;
function useHover(props: HoverProps): HoverResult;
function useFocus(props: FocusProps): FocusResult;
function useKeyboard(props: KeyboardProps): KeyboardResult;
function useDrag(options: DragOptions): DragResult;
function useDrop(options: DropOptions): DropResult;

Interactions

Focus Management

Advanced focus management including focus rings, focus scopes, and focus restoration.

function useFocusRing(props?: AriaFocusRingProps): FocusRingAria;
function useFocusManager(): FocusManager;
function useFocusable(props: FocusableOptions, domRef: RefObject<Element>): FocusableAria;

Focus Management

Internationalization

Comprehensive i18n support with locale-aware formatting, RTL layout, and localization utilities.

function useLocale(): { locale: string; direction: 'ltr' | 'rtl' };
function useDateFormatter(options: DateFormatterOptions): DateFormatter;
function useNumberFormatter(options: Intl.NumberFormatOptions): Intl.NumberFormat;
function useCollator(options: Intl.CollatorOptions): Intl.Collator;

Internationalization

Toast Notifications

Toast notification system for displaying temporary messages and alerts.

function useToast(props: AriaToastProps, state: ToastState, ref: RefObject<Element>): ToastAria;
function useToastRegion(props: AriaToastRegionProps, state: ToastRegionState, ref: RefObject<Element>): ToastRegionAria;

Toast Notifications

Tags

Tag components for displaying and managing collections of labels or categories.

function useTag(props: AriaTagProps, state: TagState, ref: RefObject<Element>): TagAria;
function useTagGroup(props: AriaTagGroupProps, state: TagGroupState, ref: RefObject<Element>): TagGroupAria;

Tags

Drag and Drop

Comprehensive drag and drop system for building interactive interfaces with accessible keyboard navigation.

function useDrag(options: DragOptions): DragResult;
function useDrop(options: DropOptions): DropResult;
function useDraggableCollection(props: DraggableCollectionProps): DraggableCollectionResult;
function useDroppableCollection(props: DroppableCollectionProps): DroppableCollectionResult;
function useDraggableItem(props: DraggableItemProps): DraggableItemResult;
function useDroppableItem(props: DroppableItemProps): DroppableItemResult;
function useDropIndicator(props: DropIndicatorProps): DropIndicatorResult;
function useClipboard(options: ClipboardOptions): ClipboardResult;

Drag and Drop

Disclosure

Disclosure components for expandable content sections.

function useDisclosure(props: AriaDisclosureProps, ref: RefObject<Element>): DisclosureAria;

Landmarks

Landmark components for improving page navigation and structure.

function useLandmark(props: AriaLandmarkProps, ref: RefObject<Element>): LandmarkAria;

Server-Side Rendering

SSR utilities for handling server-side rendering scenarios and hydration.

function SSRProvider(props: SSRProviderProps): JSX.Element;
function useIsSSR(): boolean;

Visually Hidden

Utilities for hiding content visually while keeping it accessible to screen readers.

function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element;
function useVisuallyHidden(props?: VisuallyHiddenOptions): VisuallyHiddenAria;

Utilities

Utility hooks and functions for common React Aria patterns and prop management.

function mergeProps(...props: any[]): any;
function chain(...callbacks: any[]): (...args: any[]) => void;
function useId(defaultId?: string): string;
function useObjectRef<T>(forwardedRef: ForwardedRef<T>): RefObject<T>;
function RouterProvider(props: RouterProviderProps): JSX.Element;

Utilities

Common Types

type Key = string | number;

type Orientation = 'horizontal' | 'vertical';

type SelectionMode = 'none' | 'single' | 'multiple';

type ValidationState = 'valid' | 'invalid';

type NecessityIndicator = 'icon' | 'label';

interface PressEvent {
  type: 'pressstart' | 'pressend' | 'pressup' | 'press';
  pointerType: 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
  target: Element;
  shiftKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  altKey: boolean;
}

interface HoverEvent {
  type: 'hoverstart' | 'hoverend';
  pointerType: 'mouse' | 'pen';
  target: Element;
}

interface FocusEvent {
  type: 'focus' | 'blur';
  target: Element;
  relatedTarget: Element | null;
}

interface KeyboardEvent {
  type: 'keydown' | 'keyup';
  key: string;
  code: string;
  shiftKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  altKey: boolean;
}

interface DOMAttributes<T = Element> {
  [key: string]: any;
}

interface RefObject<T> {
  current: T | null;
}

type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;

interface MutableRefObject<T> {
  current: T;
}

interface Collection<T> {
  getKeys(): Iterable<Key>;
  getItem(key: Key): T | null;
  getSize(): number;
}

interface SelectionManager {
  selectedKeys: Set<Key>;
  isSelected(key: Key): boolean;
  select(key: Key): void;
  selectAll(): void;
  clearSelection(): void;
}