useEscapeKeydown

npm install @radix-ui/react-use-escape-keydown

function useEscapeKeydown(
  onEscapeKeyDown?: (event: KeyboardEvent) => void,
  ownerDocument?: Document
): void

import { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';

function Modal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
  useEscapeKeydown(() => {
    if (isOpen) {
      onClose();
    }
  });

  if (!isOpen) return null;

  return (
    <div className="modal">
      <h2>Modal Content</h2>
      <button onClick={onClose}>Close</button>
    </div>
  );
}

import { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';

function Dialog({ onDismiss }: { onDismiss: () => void }) {
  useEscapeKeydown((event) => {
    // Prevent default browser behavior
    event.preventDefault();
    
    // Custom logic before dismissing
    if (confirm('Are you sure you want to close?')) {
      onDismiss();
    }
  });

  return <div className="dialog">Dialog content</div>;
}

import { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';

function IframeModal({ iframeRef, onClose }: { 
  iframeRef: RefObject<HTMLIFrameElement>;
  onClose: () => void;
}) {
  const iframeDocument = iframeRef.current?.contentDocument ?? document;
  
  useEscapeKeydown(() => {
    onClose();
  }, iframeDocument);

  return <div>Modal inside iframe</div>;
}

import { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';

function Popover({ isOpen, canDismiss, onClose }: { 
  isOpen: boolean;
  canDismiss: boolean;
  onClose: () => void;
}) {
  useEscapeKeydown(
    isOpen && canDismiss ? onClose : undefined
  );

  if (!isOpen) return null;
  return <div className="popover">Popover content</div>;
}