@1ohooks/use-escape

@1ohooks/use-escape is a custom React hook that simplifies the handling of the Escape key press event. It allows you to execute a callback function when the Escape key is pressed.

Installation

Install the package with:

npm install @1ohooks/use-escape
# or
yarn add @1ohooks/use-escape

Usage

To use the useEscape hook in your React project, import it and provide a callback function that you want to execute when the Escape key is pressed.

import { useEscape } from '@1ohooks/use-escape';

function MyComponent() {
  const handleCloseModal = () => {
    // Implement your logic to close the modal
  };

  // Attach the useEscape hook with your callback function
  useEscape(handleCloseModal);

  // The handleCloseModal function will be called when the Escape key is pressed

  return (
    <div>
      {/* Your component content */}
    </div>
  );
}

Example

Here's a simple example of using @1ohooks/use-escape to close a modal when the Escape key is pressed:

import React, { useState } from 'react';
import { useEscape } from '@1ohooks/use-escape';

function Modal() {
  const [isOpen, setIsOpen] = useState(true);

  const handleCloseModal = () => {
    setIsOpen(false);
  };

  useEscape(handleCloseModal);

  return (
    <div className={`modal ${isOpen ? 'open' : 'closed'}`}>
      <div className="modal-content">
        <h2>Modal Content</h2>
        <button onClick={handleCloseModal}>Close</button>
      </div>
    </div>
  );
}

We welcome contributions from the open-source community to improve and enhance @1ohooks/use-escape. If you have ideas for improvements, new features, or bug fixes, please check out our Contributing Guidelines for more information on how to contribute.

License

@1ohooks/use-escape is licensed under the MIT License. You are free to use, modify, and distribute it in your projects. We appreciate attribution but do not require it.

Thank you for using @1ohooks/use-escape to simplify Escape key handling in your React applications. We hope you find it useful!