React Custom Hooks (useEventListener)

Published at

5/1/2024

INTRO 🔔

Hello World! 👋
Now we are discussing another beautiful hook, that is useEventListener🔥.

USAGE 🔔

Sometimes we need to use Event Listeners🚀 (JavaScript Event Listeners) in React Apps💻. Every time while use event listeners we need to call them and remove them after the call. React custom hook concept will help us to make these listeners readable and efficient😎.

CODE 🔔

import { useEffect } from "react";

export const useEventListener = (callback, event, element = "window") => {
  useEffect(() => {
    if (element === "window" && typeof window !== undefined) {
      window.addEventListener(event, callback);
    } else {
      const tagEl = document.getElementById(element);
      tagEl.addEventListener(event, callback);
    }
    return () => window.removeEventListener(event, callback);
  }, []);
};

USE CASE 🔔

WITHOUT HOOK 🔇

import React, { useEffect } from "react";

function Index() {
  const callback = (type) => {
    console.log(type);
  };
  useEffect(() => {
    const contEl = document.getElementById("container");
    contEl.addEventListener("mouseover", () => callback("over"));
    contEl.addEventListener("mouseout", () => callback("out"));

    return () => {
      contEl.removeEventListener("mouseover", callback);
      contEl.removeEventListener("mouseout", callback);
    };
  }, []);
  return (
    <div>
      <div
        id="container"
        style={{ width: "100px", height: "100px", background: "red" }}
      >
        Hello World
      </div>
    </div>
  );
}

export default Index;

WITH HOOK 🔊

import React from "react";
import { useEventListener } from "./hook";

function Index() {
  const callback = (type) => {
    console.log(type);
  };
  useEventListener(() => callback("over"), "mouseover", "container");
  useEventListener(() => callback("out"), "mouseout", "container");
  return (
    <div>
      <div
        id="container"
        style={{ width: "100px", height: "100px", background: "red" }}
      >
        Hello World
      </div>
    </div>
  );
}

export default Index;

SOME OTHER EXAMPLES

import React from "react";
import { useEventListener } from "./hook";

function Index() {
  useEventListener(() => {
    console.log("scrolling...");
  }, "scroll");
  return (
    <div>
      <div
        id="container"
        style={{ width: "100px", height: "1000px", background: "red" }}
      >
        Hello World
      </div>
    </div>
  );
}

export default Index;

import React from "react";
import { useEventListener } from "./hook";

function Index() {
  useEventListener(() => {
      console.log("clicked...");
    },
    "click", "btn");
  return (
    <div>
      <button id="btn">click here</button>
    </div>
  );
}

export default Index;

CONCLUSION 🔔

This is a very helpful hook to call event listeners in React Apps.
I hope this hook is very helpful. We will discuss another new hook in our next post.