Implement Custom useKeyPress Hook in React

In this blog post, we will delve into creating a custom useKeyPress hook in React. This hook will enable us to listen for specific keypress events and trigger actions accordingly. Let's dive into the implementation details.

Prerequisites

This custom hook implementation required an understanding of the registering and deregistering of event listeners and handling key-down events.

Implementation of useKeyPress Hook

Let's start by creating a custom hook named useKeyPress that will listen for a specific key press. Here's the implementation:

    import React, { useEffect } from 'react';

    const useKeyPress = (targetKey, callback) => {
        useEffect(() => {
            const handleKeyPress = (e) => {
                if (e.key === targetKey) {
                    callback();
                }
            };

            document.addEventListener('keydown', handleKeyPress);

            return () => {
                document.removeEventListener('keydown', handleKeyPress);
            };
        }, [targetKey, callback]);
    };

    export default useKeyPress;
    

In the above code snippet:

• We define the useKeyPress hook that takes two parameters: targetKey (the key to listen for) and callback (the function to be executed when the key is pressed).
• Inside the useEffect hook, we add an event listener to the document to listen for keydown events.
• When the specified targetKey is pressed, we invoke the callback function.
• We ensure to clean up the event listener on component unmount to avoid memory leaks.

Usage of useKeyPress Hook

Now, let's see how we can use the useKeyPress hook in a React component:

    import React from 'react';
    import useKeyPress from './useKeyPress';

    const App = () => {
        const handleKeyPress = () => {
            console.log('Spacebar pressed!');
        };

        useKeyPress(' ', handleKeyPress);

        return (
            <div>
                Press the spacebar to see the message in the console.
            </div>
        );
    };

    export default App;
    

In this example, we import the useKeyPress hook and use it to listen for the spacebar key press. When the spacebar is pressed, the message "Spacebar pressed!" will be logged to the console.

Now that you understand this custom hook, let's explore 20+ Most Asked Custom Hooks in React & 100+ top React Interview Questions and Answers to prepare for your next frontend interview 

Happy Coding:)