چطور ارتفاع viewport پنجره رو در ReactJS به دست بیارم؟

برای اینکه بتونی ارتفاع ویوپورت یا همون ارتفاع پنجره مرورگر رو توی ReactJS به دست بیاری، باید از state و event listenerها استفاده کنی,

تا وقتی اندازه پنجره تغییر می‌کنه، این مقدار هم آپدیت بشه. اینجا یه مثال ساده از کدی که می‌تونی استفاده کنی برات میارم:

import React, { useState, useEffect } from "react";
function App() {
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
useEffect(() => {
const handleResize = () => {
setWindowHeight(window.innerHeight);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return (
<div>
<h1>ارتفاع ویوپورت: {windowHeight}px</h1>
</div>
);
}
export default App;

توضیحات کد:

• اول از همه، یه state به اسم windowHeight با مقدار اولیه‌ی window.innerHeight ساختیم که همون ارتفاع فعلی ویوپورت رو می‌گیره.
• توی useEffect، یه event listener به اسم handleResize تعریف کردیم که هر بار سایز پنجره تغییر کنه، مقدار جدید window.innerHeight رو می‌گیره و توی state ذخیره می‌کنه.
• وقتی کامپوننت mount شد، این event listener رو به resize اضافه می‌کنیم. وقتی کامپوننت unmount شد، اون رو پاک می‌کنیم تا از memory leak جلوگیری کنیم.
• در نهایت، توی JSX، ارتفاع ویوپورت رو نمایش می‌دیم.

این کد به خوبی کار می‌کنه و هر وقت کاربر اندازه پنجره رو تغییر بده، مقدار ارتفاع به‌روز میشه.

موفق باشی!