Skip to main content

useEscapeKeyClose

The useEscapeKeyClose hook in React Refocus is a custom hook designed to handle the Escape key press event and trigger a callback function. This hook is particularly useful for closing dialogs, modals, or any UI component that should be dismissed when the Escape key is pressed.

Syntax​

useEscapeKeyClose(closeCallback: () => void): void;

Props​

  • closeCallback (function): The callback function to execute when the Escape key is pressed.

Example​

import React from 'react';
import useEscapeKeyClose from 'react-refocus/hooks/useEscapeKeyClose';

const Modal = ({ onClose }: { onClose: () => void }) => {
    useEscapeKeyClose(onClose);

    return (
        <div className="modal">
            <p>Press Escape to close this modal.</p>
            <button onClick={onClose}>Close</button>
        </div>
    );
};

export default Modal;

Usage​

The useEscapeKeyClose hook is useful for improving user experience by providing a quick way to close elements like modals, dialogs, or other overlays using the keyboard. This is especially important for accessibility, allowing users who rely on keyboard navigation to interact with your application effectively.

Accessibility Note​

Using the Escape key to close interactive elements like modals is a common pattern in web applications. This feature helps make your application more accessible to users with disabilities by providing an intuitive way to dismiss content.