@fluentui/react-aria

What is @fluentui/react-aria?

@fluentui/react-aria is a library that provides accessible React components and hooks, following the Fluent UI design system. It focuses on ensuring that components are accessible and adhere to ARIA standards.

What are @fluentui/react-aria's main functionalities?

Button

The useButton hook provides the necessary ARIA attributes and event handlers to make a button accessible.

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

function MyButton(props) {
  let ref = React.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.

import { useCheckbox } from '@fluentui/react-aria';

function MyCheckbox(props) {
  let ref = React.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.

import { useDialog } from '@fluentui/react-aria';

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

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

Other packages similar to @fluentui/react-aria

reakit

Reakit is a low-level component library for building accessible web apps. It provides a set of unstyled components and hooks that you can use to build your own design system. It is similar to @fluentui/react-aria in its focus on accessibility, but it offers more flexibility in terms of styling and customization.

README

@fluentui/react-aria

React Aria components for Fluent UI React

These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.