tessl/npm-react-aria

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Aria

Name: tessl/npm-react-aria
Author: tessl

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

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;
}