useEventlistner Hook React

import { useEffect } from "react";

const useEventListener = (eventName, handler, element = window) => {
  useEffect(() => {
    // Make sure the element supports addEventListener
    const isSupported = element && element.addEventListener;
    if (!isSupported) return;

    // Add the event listener
    element.addEventListener(eventName, handler);

    // Clean up the event listener on component unmount
    return () => {
      element.removeEventListener(eventName, handler);
    };
  }, [eventName, handler, element]);
};

// Usage in a component
function App() {
  const handleKeyPress = (event) => {
    if (event.key === "Enter") {
      console.log("Enter key pressed");
    }
  };

  // Using the useEventListener hook
  useEventListener("keydown", handleKeyPress);

  return (
    <div className="App">
      <h1>Event Listener Example</h1>
      <p>Press the Enter key and check the console.</p>
    </div>
  );
}

export default App;