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.
Peace ๐
Top comments (0)