react-aria

What is react-aria?

The react-aria package provides a collection of React hooks that help you build accessible user interfaces. It abstracts away the complexity of managing ARIA roles, properties, and keyboard interactions, making it easier to create components that are accessible to all users.

What are react-aria's main functionalities?

Button

The useButton hook provides the necessary ARIA attributes and event handlers to make a button accessible. It manages focus, keyboard interactions, and ARIA roles.

import { useButton } from 'react-aria';
import { useRef } from 'react';

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

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

Checkbox

The useCheckbox hook provides the necessary ARIA attributes and event handlers to make a checkbox accessible. It manages state, keyboard interactions, and ARIA roles.

import { useCheckbox } from 'react-aria';
import { useRef } from 'react';

function MyCheckbox(props) {
  let ref = useRef();
  let { inputProps } = useCheckbox(props, ref);

  return (
    <label>
      <input {...inputProps} ref={ref} />
      {props.children}
    </label>
  );
}

Dialog

The useDialog hook provides the necessary ARIA attributes and event handlers to make a dialog accessible. It manages focus trapping, keyboard interactions, and ARIA roles.

import { useDialog } from 'react-aria';
import { useRef } from 'react';

function MyDialog(props) {
  let ref = useRef();
  let { dialogProps } = useDialog(props, ref);

  return (
    <div {...dialogProps} ref={ref}>
      {props.children}
    </div>
  );
}

Other packages similar to react-aria

react-a11y

react-a11y is a package that provides accessibility warnings in the console during development. It helps developers identify and fix accessibility issues in their React components. Unlike react-aria, it does not provide hooks or components to manage ARIA attributes and interactions.

reakit

Reakit is a low-level component library for building accessible web apps. It provides primitive components that can be composed to create more complex UI elements. Reakit focuses on flexibility and composability, similar to react-aria, but offers a different API and set of components.

README

React Aria

A library of React Hooks that provides accessible UI primitives for your design system.

Features

• ♿️ Accessible – React Aria provides accessibility and behavior according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.
• 📱 Adaptive – React Aria ensures consistent behavior, no matter the UI. It supports mouse, touch, keyboard, and screen reader interactions that have been tested across a wide variety of browsers, devices, and platforms.
• 🌍 International – React Aria supports over 30 languages, including right-to-left-specific behavior, internationalized date and number formatting, and more.
• 🎨 Fully customizable – React Aria doesn’t implement any rendering or impose a DOM structure, styling methodology, or design-specific details. It provides behavior, accessibility, and interactions and lets you focus on your design.

Getting started

The easiest way to start building a component library with React Aria is by following our getting started guide. It walks through all of the steps needed to install the hooks from npm, and create your first component.

Example

Here is a very basic example of using React Aria.

import {useButton} from '@react-aria/button';

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

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

<Button onPress={() => alert('Button pressed!')}>Press me</Button>

Learn more

React Aria is part of a family of libraries that help you build adaptive, accessible, and robust user experiences. Learn more about React Spectrum and React Stately on our website.