useMediaQuery

useMediaQuery theo dõi một CSS media query và render lại khi nó đổi — breakpoint, chế độ tối, giảm chuyển động, loại con trỏ.

Dựa trên useSyncExternalStore và matchMedia: không nháy giữa hai giá trị, tự huỷ đăng ký khi unmount, an toàn khi không có window (trả về defaultValue). Sheet dùng hook này để chọn panel hay bottom sheet. Chỉ dùng khi cần đổi hành vi hoặc component; đổi bố cục thuần tuý vẫn nên dùng biến thể responsive của Tailwind (md:…). Đây là một trong các hook dùng chung; các hook còn lại ở trang Hooks.

(min-width: 768px)Không khớp
(prefers-color-scheme: dark)Không khớp
(prefers-reduced-motion: reduce)Không khớp
(pointer: coarse)Không khớp

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { useMediaQuery } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Đổi component theo breakpoint

Màn hình rộng hiện đủ nút có nhãn; màn hình hẹp gom lại thành một nút icon. Thu nhỏ cửa sổ để thấy thay đổi.

Tôn trọng giảm chuyển động

Hành vi viết bằng JS (cuộn, đếm giờ) không có biến thể motion-reduce: — đọc trực tiếp bằng hook.

Bố cục rộng

Giá trị mặc định khi SSR

Trên server không có matchMedia: hook trả defaultValue, rồi cập nhật ngay sau hydrate.

Cách dùng

Nên

Dùng cho khác biệt về hành vi / component (Sheet panel ↔ bottom sheet, menu gộp).
Viết query đúng cú pháp CSS, kể cả dấu ngoặc: "(min-width: 768px)".
Đặt defaultValue khớp với bố cục server render để giảm nháy khi hydrate.

Không nên

Không dùng để đổi class bố cục thuần tuý — biến thể md: / lg: của Tailwind rẻ hơn và không cần JS.
Không tạo query mới mỗi lần render (chuỗi nối từ state thay đổi liên tục).
Không dựa vào (pointer: coarse) để đoán "điện thoại" — máy tính bảng có bàn phím, laptop có màn cảm ứng.

Props

Prop · Kiểu	Mặc định	Mô tả
querystring	Mặc định: —	Media query CSS, ví dụ "(min-width: 768px)", "(prefers-reduced-motion: reduce)".
options.defaultValueboolean	Mặc định: false	Giá trị khi không có window / matchMedia (SSR, test).
(returns)boolean	Mặc định: —	true khi query đang khớp; tự cập nhật khi đổi.