React useOnGlobalEvent Hook

Introduction

In this lab, we will explore the useOnGlobalEvent hook in React. This hook allows us to listen to events that occur on the global object, such as the mousemove event on the window object. By using this hook, we can easily execute a callback function whenever a specific global event occurs.

Skills Graph

React useOnGlobalEvent Hook

index.html and script.js have already been provided in the VM. In general, you only need to add code to script.js and style.css.

This function executes a callback function whenever an event occurs on the global object. To implement this function:

1. Use the useRef() hook to create a variable, listener, which will hold the listener reference.
2. Use the useRef() hook to create a variable that will hold the previous values of the type and options arguments.
3. Use the useEffect() hook and EventTarget.addEventListener() to listen to the given event type on the Window global object.
4. Use EventTarget.removeEventListener() to remove any existing listeners and clean up when the component unmounts.

const useOnGlobalEvent = (type, callback, options) => {
  const listener = React.useRef(null);
  const previousProps = React.useRef({ type, options });

  React.useEffect(() => {
    const { type: previousType, options: previousOptions } =
      previousProps.current;

    if (listener.current) {
      window.removeEventListener(
        previousType,
        listener.current,
        previousOptions
      );
    }

    listener.current = callback;
    window.addEventListener(type, callback, options);
    previousProps.current = { type, options };

    return () => {
      window.removeEventListener(type, listener.current, options);
    };
  }, [callback, type, options]);
};

Here's an example of how to use this function:

const App = () => {
  useOnGlobalEvent("mousemove", (e) => {
    console.log(`(${e.x}, ${e.y})`);
  });

  return <p>Move your mouse around</p>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the React useOnGlobalEvent Hook lab. You can practice more labs in LabEx to improve your skills.