DOCSEARCHbyAlgolia
Submit Docs

React Spectrum

repository·main·Indexed 12 days ago

https://github.com/adobe/react-spectrum

A collection of libraries and tools from Adobe for building adaptive, accessible, and robust user experiences. It provides a complete design system implementation and low-level primitives for custom accessible UI, including support for Spectrum 2 styles via macros and integration with frameworks like Next.js and Remix.

Tokens
756.6K
Snippets
2.3K
Records
3.5K
Agent score
96%

What's inside React Spectrum

  1. Overview of React Aria

    main
    React Aria is a library of accessible, high-quality UI components and hooks designed for building design systems. It provides over 50 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, while remaining completely style-free. This allows developers to apply any custom styling or animation solution to match their specific application needs.

  2. What is React Stately?

    main
    React Stately is a library of React Hooks designed to provide cross-platform state management for design systems. It serves as the foundational logic layer for component libraries, handling the complex state management required for common UI components without making assumptions about the DOM, view systems, or visual design. Because it is implemented as hooks, it allows for high composability and adaptation to specific needs.

  3. Overview of @internationalized/number

    main

    The @internationalized/number package provides utilities for formatting and parsing numbers across different locales and numbering systems. It is designed to handle cultural differences in currency symbols, units, decimal points, grouping separators, and digit representations (such as Latin, Arabic, and Han numbering systems).

    Key Features:

    • Advanced formatting: Supports decimals, percentages, currency, and unit values.
    • Locale-aware: Automatically handles locale-specific decimal characters, separators, percent signs, and symbols.
    • International numbering systems: Supports Latin, Arabic, and Han decimal systems, including automatic detection of the numbering system used in input strings.
    • Small bundle size: Approximately 1.7 kB (minified/compressed with Brotli) because it leverages built-in browser APIs for locale data instead of shipping large data files.

  4. Overview of TableView accessibility and features

    main

    A TableView is a component designed to display content organized into rows and columns. It is built to handle large datasets efficiently using a virtual scroller, which ensures that only the items currently visible in the viewport are rendered into the DOM.

    Key features supported by the TableView include:

    • Sorting
    • Infinite scrolling
    • Drag and drop (both into and out of the table)
    • Multiple selection
    • Keyboard navigation

  5. What is React Aria?

    main
    React Aria is a library of React Hooks designed to provide accessible UI primitives for design systems. It focuses on providing behavior, accessibility, and interactions without imposing any rendering, DOM structure, or styling methodology. This allows developers to build fully customizable components that adhere to WAI-ARIA Authoring Practices, support multiple input methods (mouse, touch, keyboard, screen reader), and handle internationalization (including RTL support).

  6. Overview of React Spectrum

    main

    React Spectrum is a React implementation of Adobe's Spectrum design system. It provides a suite of components designed to create adaptive, accessible, and cohesive user experiences across all Adobe applications.

    Key features include:

    • Accessibility: Components include full screen reader and keyboard navigation support.
    • Adaptivity: Designed for mouse, touch, and keyboard interactions using responsive design principles.
    • Color Schemes: Automatic support for dark and light modes based on operating system settings.
    • Internationalization: Support for over 30 languages, including right-to-left (RTL) layouts, and localized date and number formatting.

  7. Overview of React Aria Components

    main

    React Aria Components is a library providing over 50 components that come with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization.

    Key characteristics include:

    • Style-free: Components are unstyled by default, allowing you to use any styling or animation solution. They use parts, built-in states, render props, and slots to facilitate custom designs.
    • Adaptive: Optimized for mouse, touch, keyboard, and screen reader interactions across all devices.
    • Accessible: Built with accessibility as a priority and tested for compatibility with various assistive technologies.
    • Internationalized: Supports translations in 30+ languages, localized date/number formatting, 13 calendar systems, 5 numbering systems, and right-to-left (RTL) layouts.
    • Customizable: Offers a tiered API approach. You can use high-level components with built-in DOM structures, compose patterns using contexts, or use the low-level Hook-based API (React Aria) for ultimate control.

  8. What is React Spectrum?

    main

    React Spectrum is a collection of libraries and tools designed to help developers build adaptive, accessible, and robust user experiences. It is composed of three distinct libraries that serve different purposes in the component construction lifecycle:

    • React Spectrum: A complete React implementation of Adobe's Spectrum design system. Use this if you want pre-built, styled components that follow Adobe's design language.
    • React Aria: A library of React Hooks that provides accessible UI primitives. Use this to build your own design system by providing the behavior, accessibility, and interaction logic for your custom DOM structures.
    • React Stately: A library of React Hooks that provides cross-platform state management and core logic. This works alongside React Aria to handle the underlying state of components.

  9. Overview of React Spectrum Libraries

    main

    React Spectrum is a collection of libraries and tools designed to help developers build adaptive, accessible, and robust user experiences. The ecosystem is divided into several specialized libraries that serve different layers of the UI stack:

    • React Spectrum: A complete React implementation of Adobe's Spectrum design system. It provides ready-to-use, cohesive, and accessible components.
    • React Aria: A library of unstyled React components and hooks. It focuses on providing the accessibility and interaction logic required to build high-quality UI components for your own design system.
    • React Stately: A library of React Hooks dedicated to cross-platform state management, handling the complex logic of UI states (like selection, focus, or collection management).
    • Internationalized: A collection of framework-agnostic libraries specifically for handling internationalization tasks on the web.

  10. Overview of React Aria and React Spectrum Date and Time Pickers

    main

    React Aria and React Spectrum provide a comprehensive suite of date and time picker components and hooks. These include calendars, date and time fields, and range pickers designed with a focus on:

    • Flexibility: Support for custom date ranges (multiple months, week views), marking dates as unavailable, non-contiguous range selections, validation, configurable granularity, and time zone support.
    • Internationalization: Support for 13 different calendar systems (e.g., Gregorian, Buddhist, Islamic, Persian), locale-specific formatting, various number systems, 12/24 hour time, and right-to-left (RTL) support.
    • Accessibility: Tested across desktop and mobile devices with support for mouse, touch, and keyboard, including clear screen reader announcements.
    • Customizability: React Aria hooks allow full control over rendering and styling (compatible with Tailwind CSS, Styled Components, CSS modules, etc.) while managing the underlying accessibility and internationalization logic.

  11. Overview of @internationalized/date

    main

    The @internationalized/date package provides immutable, locale-aware objects and functions for representing and manipulating dates and times. It is designed to handle the complexities of different calendar systems, time zones, and daylight saving time rules, serving as a robust alternative to the standard JavaScript Date object. The library is inspired by the Temporal proposal.

    Key Features

    • Typed, Immutable Objects: Prevents accidental side effects during manipulation.
    • International Calendars: Supports 13 calendar systems (e.g., Gregorian, Buddhist, Islamic, Persian).
    • Time Zone Awareness: Through the ZonedDateTime object.
    • Predictable API: Explicitly resolves ambiguities in arithmetic and time zone conversions.
    • Small & Tree-shakeable: The full library is ~8 kB (Brotli compressed); using only specific calendars and methods can reduce this to ~2.8 kB.

  12. Handle selection in collection components

    main

    Many collection components in React Aria Components support selecting items via clicking, tapping, or keyboard interactions. You can manage selection through several patterns:

    • Event Handling: Listen to selection events to respond to user interactions.
    • Programmatic Control: Control which items are selected using state management.
    • Data Structures: Selection is represented using specific data structures (typically Selection sets) to manage single or multiple item states.

    Key capabilities include:

    • Multiple selection: Selecting more than one item at a time.
    • Select all: A mechanism to select every item in a collection.
    • Selection behavior: Customizing how items are selected (e.g., toggling vs. replacing selection).