useWindowSize

useWindowSize - bu hozirgi oyna o'lchovlarini qaytaradigan maxsus React hooki bo'lib, sizning ilovalaringizda javob beruvchi dizaynni amalga oshirish imkonini beradi.

useWindowSize Hook

useWindowSize - bu hozirgi oyna o'lchovlarini qaytaradigan maxsus React hooki bo'lib, sizning ilovalaringizda javob beruvchi dizaynni amalga oshirish imkonini beradi.

O'rnatish

npm install @udemere/usehooks

Foydalanish

useWindowSize hookini komponentingizda ishlatish uchun quyidagi misolga amal qiling:

import { useWindowSize } from "@udemere/usehooks";
 
const MyComponent = () => {
  const { width, height } = useWindowSize();
 
  return (
    <div>
      <h1>Hozirgi Oyna O'lchovi</h1>
      <p>Kenglik: {width}px</p>
      <p>Bo'ylik: {height}px</p>
    </div>
  );
};

Qaytadi

useWindowSize hooki quyidagi xususiyatlarga ega ob'ekt qaytaradi:

• width: Hozirgi oyna kengligi, pikselda. Agar mavjud bo'lmasa, undefined bo'lishi mumkin.
• height: Hozirgi oyna bo'yligi, pikselda. Agar mavjud bo'lmasa, undefined bo'lishi mumkin.

Misol

Quyida useWindowSize hookini ishlatib javob beruvchi komponent yaratish misoli keltirilgan:

import React from "react";
import { useWindowSize } from "@udemere/usehooks";
 
const ResponsiveComponent = () => {
  const { width, height } = useWindowSize();
 
  return (
    <div>
      <h2>Oyna O'lchovlari Haqida Ma'lumot</h2>
      <p>Kenglik: {width}px</p>
      <p>Bo'ylik: {height}px</p>
    </div>
  );
};
 
export default ResponsiveComponent;

Eslatmalar

• Hook komponent o'rnatilganda dastlabki oyna o'lchovlarini belgilaydi.
• Oyna o'lchovlari o'zgarganda dinamik ravishda yangilanadi.
• Komponent o'chirilganda o'lchov o'zgarishi hodisasi uchun hodisa tinglovchisi tozalanadi, bu esa xotira oqishlarining oldini oladi.

Bog'liq Hooklar

• useScrollPosition - Oynaning hozirgi aylantirish pozitsiyasini olish.
• useDebounce - Yangilanishlar tezligini cheklash uchun bir qiymatni debounc qilish.