@react-aria/dialog

What is @react-aria/dialog?

@react-aria/dialog is a package that provides accessible dialog components for React applications. It is part of the React Aria library, which offers a collection of hooks that implement accessible UI patterns. The package helps developers create modal dialogs that are fully accessible, including proper focus management and ARIA attributes.

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

Basic Dialog

This code sample demonstrates how to create a basic accessible dialog using the @react-aria/dialog package. It includes a button to open the dialog, and the dialog itself contains a title, some content, and a button to close the dialog.

```jsx
import { useDialog } from '@react-aria/dialog';
import { useOverlayTriggerState } from '@react-stately/overlays';
import { OverlayContainer, Overlay } from '@react-aria/overlays';

function DialogExample() {
  let state = useOverlayTriggerState({});
  let ref = React.useRef();
  let { dialogProps } = useDialog({}, ref);

  return (
    <>
      <button onClick={() => state.open()}>Open Dialog</button>
      {state.isOpen && (
        <OverlayContainer>
          <Overlay>
            <div {...dialogProps} ref={ref}>
              <h3>Dialog Title</h3>
              <p>Dialog content goes here.</p>
              <button onClick={() => state.close()}>Close</button>
            </div>
          </Overlay>
        </OverlayContainer>
      )}
    </>
  );
}
```

Focus Management

This code sample demonstrates how to manage focus within the dialog using the FocusScope component from @react-aria/focus. It ensures that focus is contained within the dialog while it is open and restores focus to the trigger element when the dialog is closed.

```jsx
import { useDialog } from '@react-aria/dialog';
import { useOverlayTriggerState } from '@react-stately/overlays';
import { OverlayContainer, Overlay } from '@react-aria/overlays';
import { FocusScope } from '@react-aria/focus';

function FocusManagedDialog() {
  let state = useOverlayTriggerState({});
  let ref = React.useRef();
  let { dialogProps } = useDialog({}, ref);

  return (
    <>
      <button onClick={() => state.open()}>Open Dialog</button>
      {state.isOpen && (
        <OverlayContainer>
          <Overlay>
            <FocusScope contain restoreFocus autoFocus>
              <div {...dialogProps} ref={ref}>
                <h3>Dialog Title</h3>
                <p>Dialog content goes here.</p>
                <button onClick={() => state.close()}>Close</button>
              </div>
            </FocusScope>
          </Overlay>
        </OverlayContainer>
      )}
    </>
  );
}
```

Other packages similar to @react-aria/dialog

react-modal

react-modal is a widely-used package for creating accessible modal dialogs in React. It provides a simple API for creating modals and includes features like focus management and ARIA attributes. Compared to @react-aria/dialog, react-modal is more straightforward but may require additional customization for complex accessibility needs.

react-aria-modal

react-aria-modal is another package for creating accessible modals in React. It emphasizes ARIA compliance and focus management. While it provides similar functionality to @react-aria/dialog, it is not part of a larger library like React Aria, which means it may lack some of the integrated features and consistency found in the React Aria ecosystem.

README

@react-aria/dialog

This package is part of react-spectrum. See the repo for more details.