@react-aria/dialog

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>
      )}
    </>
  );
}
```