useMediaQuery

useMediaQuery - bu @udemere/usehooks kutubxonasida joylashgan maxsus hook bo'lib, u React ilovalarida media so'rovlari o'zgarishlarini qulay tarzda tinglash imkonini beradi va useSyncExternalStore dan foydalanadi.

useMediaQuery Hook

useMediaQuery - bu @udemere/usehooks kutubxonasida joylashgan maxsus hook bo'lib, u React ilovalarida media so'rovlari o'zgarishlarini qulay tarzda tinglash imkonini beradi va useSyncExternalStore dan foydalanadi. Ushbu hook ekran o'lchami yoki boshqa media xususiyatlaridagi o'zgarishlarga dinamik tarzda javob berishga imkon beradi, bu esa foydalanuvchi interfeysini har doim brauzerning ko'rinishiga mos kelishini ta'minlaydi.

Foydalanish

import { useMediaQuery } from "@udemere/usehooks";
 
const isMobile = useMediaQuery("(max-width: 768px)");

Parametrlar

• query: string Baholanishi kerak bo'lgan media so'rovi satri. Bu CSS media so'rovlari formatida bo'lishi kerak, masalan (max-width: 768px) yoki (prefers-color-scheme: dark).

Qaytadi

• boolean Media so'rovi mos keladimi yoki yo'qligini bildiruvchi boolean qiymati. Agar so'rov joriy ko'rinish yoki media shartlariga mos kelsa, hook true qiymatini qaytaradi; aks holda, false qaytaradi.

Qanday ishlaydi

1. Media So'rovlari O'zgarishlarini Kuzatish: Hook window.matchMedia(query) ga obuna bo'lib, o'zgarishlar uchun addEventListener metodidan foydalanadi.

2. Snapshot Funktsiyalari:

   • getSnapshot: Klientda media so'rovi hozirda mos kelayotganini qaytarish uchun chaqiriladi.
   • getServerSnapshot: Server tomonida render qilish (SSR) paytida xato beradi, chunki media so'rovlari faqat brauzer muhitlarida qo'llab-quvvatlanadi.

3. Media So'rovi Voqealarini Boshqarish: Media so'rovi sharti o'zgarganda (masalan, oynani o'lchamini o'zgartirish), hook qaytarilgan boolean qiymatini yangilash orqali javob beradi.

4. Tozalash: O'chirilganda yoki so'rov o'zgarganda, voqea tinglovchisi olib tashlanadi, bu esa xotira oqimlarini oldini olish uchun amalga oshiriladi.

Misol

import React from 'react'
import { useMediaQuery } from '@udemere/usehooks'
 
const ResponsiveLayout: React.FC = () => {
	const isMobile = useMediaQuery('(max-width: 768px)')
 
	return (
		<div>
			{isMobile ? (
				<p>Mobil ekranda ko'rish</p>
			) : (
				<p>Katta ekranda ko'rish</p>
			)}
		</div>
	)
}
 
export default ResponsiveLayout

Ushbu misolda, useMediaQuery ko'rinish kengligi 768 pikseldan pastligini tekshiradi. Agar to'g'ri bo'lsa, komponent mobil qurilmalar uchun optimallashtirilgan kontentni ko'rsatadi; aks holda, katta ekranlar uchun kontentni ko'rsatadi.

Eslatmalar

• Ushbu hook faqat klientda ishlaydi va SSR (Server-Tomondan Render Qilish) davomida ishlamaydi. Agar SSR muhitlarida ishlatilsa, xato beradi.
• Hook faqat window obyekti mavjud bo'lganda media so'rovlarini baholashni ta'minlaydi, bu esa Next.js SSR kabi brauzer bo'lmagan muhitlardagi muammolarni oldini olishga yordam beradi.

Foydalar

• Media so'rovlari o'zgarishlarini kerakli joyda tinglaydi va keraksiz qayta render qilishni oldini oladi.
• Voqea tinglovchilarini tozalash orqali xotira oqimlarini oldini oladi.
• Komponentlarni turli media so'rovi holatlariga moslashtirish jarayonini soddalashtiradi.

O'rnatish

npm install @udemere/usehooks

Endi siz @udemere/usehooks kutubxonasidan useMediaQuery yordamida komponentlaringizda javob beruvchi xatti-harakatni osonlik bilan qo'shishingiz mumkin!