هوکها
مجموعه هوکهای React پرتو — ابزارهای RTL، ریسپانسیو، تم، و تعامل کاربر
معرفی
پرتو ۸ هوک React ارائه میدهد که مشکلات رایج توسعه محصولات فارسیمحور را حل میکنند. همه هوکها SSR-safe هستند و با Next.js App Router سازگاری کامل دارند.
import { useIsMobile, useDebounce, useLocalStorage } from '@parto-system-design/ui'راهنمای انتخاب
useIsMobileتشخیص viewport موبایل — برای تغییر layout بین Sheet و Dialog
useDebounceتأخیر در مقدار — برای جستجوی زنده و فیلتر کردن
useLocalStorageذخیره state در localStorage — برای ترجیحات و فیلترها
useInfiniteScrollبارگذاری تدریجی با IntersectionObserver — برای لیستهای طولانی
useDocumentDirectionتشخیص جهت RTL/LTR — برای انیمیشن و position سفارشی
useScrollLockقفل اسکرول body — برای overlay و منوی سفارشی
useRootStylesخواندن CSS variables — واکنشپذیر به تغییر تم
useChartThemeرنگها و استایل نمودار — برای Recharts و Visx سفارشی
دستهبندی
| دسته | هوکها | کاربرد |
|---|---|---|
| ریسپانسیو | useIsMobile | تغییر رفتار/layout بین موبایل و دسکتاپ |
| تعامل کاربر | useDebounce, useInfiniteScroll, useScrollLock | جستجوی زنده، بارگذاری تدریجی، قفل اسکرول |
| ذخیرهسازی | useLocalStorage | ماندگاری ترجیحات بین session ها |
| RTL و تم | useDocumentDirection, useRootStyles, useChartTheme | جهت متن، خواندن CSS variables، رنگهای نمودار |
نکات مشترک
SSR-safe
تمام هوکها مقادیر امن برای سرور برمیگردانند. اما اگر layout اولیه بر اساس مقدار هوک تغییر میکند، از Tailwind responsive classes یا الگوی mounted state استفاده کنید.
// الگوی مشترک برای جلوگیری از hydration mismatch
const [mounted, setMounted] = React.useState(false)
React.useEffect(() => setMounted(true), [])
if (!mounted) return <Skeleton />