useEffect addEventListener code example
Example 1: passing event handler to useEffeect
const App =() => {
const [userText, setUserText] = useState("");
useEffect(() => {
const handleUserKeyPress = event => {
const { key, keyCode } = event;
if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
setUserText(`${userText}${key}`);
}
};
window.addEventListener("keydown", handleUserKeyPress);
return () => {
window.removeEventListener("keydown", handleUserKeyPress);
};
}, [userText]);
return (
<div>
<h1>Feel free to type!</h1>
<blockquote>{userText}</blockquote>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
Example 2: react addeventlistener useeffect
const callback = useCallback((event: any) => {
event.data.status === "complete" ? setProgress(0) : setProgress(event.data.uploadProgress);
},[])
useEffect(() => {
window.addEventListener("file-upload", callback);
return () => window.removeEventListener("file-upload", callback);
}, [window, callback]);