هوکها
مجموعه هوکهای React پرتو — ابزارهای RTL، ریسپانسیو، تم، و تعامل کاربر
معرفی
پرتو مجموعهای از هوکهای React ارائه میدهد که مشکلات رایج توسعه محصولات فارسیمحور را حل میکنند. همه هوکها SSR-safe هستند و با Next.js App Router سازگاری کامل دارند.
import { useIsMobile, useDebounce, useLocalStorage } from '@partodata/ui'راهنمای انتخاب
useIsMobile
تشخیص viewport موبایل با MediaQuery — مقاومت در برابر SSR
useMediaQuery
اشتراک در یک media query و دریافت وضعیت تطبیق آن — SSR-safe
useDebounce
تأخیر در بهروزرسانی مقدار تا پایان تایپ کاربر
useInfiniteScroll
بارگذاری تدریجی با IntersectionObserver — بدون scroll event listener
useScrollLock
قفل کردن اسکرول body — مناسب برای modal و drawer
useOutsideClick
اجرای یک handler هنگام کلیک خارج از یک المان — برای بستن منو، popover و کارتها
useHotkeys
ثبت میانبرهای صفحهکلید با پشتیبانی cross-platform از کلید mod (Cmd/Ctrl) و مدیریت scope
useLocalStorage
همگامسازی state با localStorage — با سریالیزاسیون JSON و مقاوم در برابر SSR
useWhatsNew
حالت «دیدهشده» برای سطح آخرین تغییرات — مبتنی بر ترتیب، با بازیابی دومرحلهای، بدون گیر کردن روی روشن یا خاموش
useClipboard
کپی متن در کلیپبورد با وضعیت گذرای «کپی شد»
useAsync
مدیریت وضعیت یک عملیات async (loading / data / error) بدون کتابخانهی سنگین
usePrevious
مقدار رندر قبلی را برمیگرداند — برای تشخیص تغییر و مقایسه مقادیر
useDocumentDirection
تشخیص و واکنش به جهت متن (RTL/LTR) سند
useRootStyles
خواندن CSS variables تم در runtime — واکنشپذیر به تغییر تم
useChartTheme
رنگها و استایلهای نمودار از CSS variables — واکنشپذیر به تغییر تم
useFilterParams
همگامسازی دوطرفهی state یک FilterProvider با URL (query params)
useFilterPresets
ذخیره/بارگذاری/حذف preset های نامدار از state یک FilterProvider در localStorage
دستهبندی
| دسته | کاربرد |
|---|---|
| ریسپانسیو | تغییر رفتار یا چیدمان بین موبایل و دسکتاپ |
| تعامل کاربر | جستجوی زنده، بارگذاری تدریجی، قفل اسکرول، کلیدهای میانبر |
| ذخیرهسازی | ماندگاری ترجیحات کاربر بین نشستها |
| RTL و تم | جهت متن، خواندن CSS variables، رنگهای نمودار |
| ابزارهای کمکی | وضعیت async، کلیپبورد، مقدار رندر قبلی، کلیک بیرون |
| فیلتر | همگامسازی فیلترها با URL و ذخیرهی presetها در localStorage |
نکات مشترک
SSR-safe
تمام هوکها مقادیر امن برای سرور برمیگردانند. اما اگر layout اولیه بر اساس مقدار هوک تغییر میکند، از Tailwind responsive classes یا الگوی mounted state استفاده کنید.
// الگوی مشترک برای جلوگیری از hydration mismatch
const [mounted, setMounted] = React.useState(false)
React.useEffect(() => setMounted(true), [])
if (!mounted) return <Skeleton />