Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@react-aria/dialog

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-aria/dialog

Spectrum UI components in React

  • 3.0.0-nightly-326f48154-241214
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
353K
decreased by-57.59%
Maintainers
0
Weekly downloads
 
Created

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

FAQs

Package last updated on 14 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts