@react-aria/overlays

Modal

This code demonstrates how to create a modal using @react-aria/overlays. It includes state management for opening and closing the modal, and ensures accessibility features like preventing background scroll and proper focus management.

import { useOverlayTriggerState } from '@react-stately/overlays';
import { OverlayContainer, OverlayProvider, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';

function ModalExample() {
  let state = useOverlayTriggerState({});
  return (
    <OverlayProvider>
      <button onClick={() => state.open()}>Open Modal</button>
      {state.isOpen && (
        <OverlayContainer>
          <ModalDialog onClose={state.close} />
        </OverlayContainer>
      )}
    </OverlayProvider>
  );
}

function ModalDialog(props) {
  let ref = React.useRef();
  let { modalProps } = useModal();
  let { overlayProps } = useOverlay(props, ref);
  usePreventScroll();

  return (
    <div {...overlayProps} {...modalProps} ref={ref}>
      <h3>Modal Title</h3>
      <p>Modal Content</p>
      <button onClick={props.onClose}>Close</button>
    </div>
  );
}

Popover

This code demonstrates how to create a popover using @react-aria/overlays. It includes state management for opening and closing the popover, and ensures accessibility features like preventing background scroll and proper focus management.

import { useOverlayTriggerState } from '@react-stately/overlays';
import { OverlayContainer, OverlayProvider, useOverlay, usePreventScroll, usePopover } from '@react-aria/overlays';

function PopoverExample() {
  let state = useOverlayTriggerState({});
  return (
    <OverlayProvider>
      <button onClick={() => state.open()}>Open Popover</button>
      {state.isOpen && (
        <OverlayContainer>
          <PopoverDialog onClose={state.close} />
        </OverlayContainer>
      )}
    </OverlayProvider>
  );
}

function PopoverDialog(props) {
  let ref = React.useRef();
  let { popoverProps } = usePopover(props, ref);
  let { overlayProps } = useOverlay(props, ref);
  usePreventScroll();

  return (
    <div {...overlayProps} {...popoverProps} ref={ref}>
      <h3>Popover Title</h3>
      <p>Popover Content</p>
      <button onClick={props.onClose}>Close</button>
    </div>
  );
}

Tooltip

This code demonstrates how to create a tooltip using @react-aria/overlays. It includes state management for showing and hiding the tooltip, and ensures accessibility features like proper focus management and delay handling.

import { useTooltipTriggerState } from '@react-stately/tooltip';
import { useTooltip, TooltipTrigger, Tooltip } from '@react-aria/tooltip';

function TooltipExample() {
  let state = useTooltipTriggerState({});
  return (
    <TooltipTrigger state={state} delay={300} placement="top">
      <button>Hover or focus me</button>
      <Tooltip>Tooltip Content</Tooltip>
    </TooltipTrigger>
  );
}