useDocumentDirection
تشخیص و واکنش به جهت متن (RTL/LTR) سند
معرفی
هوک useDocumentDirection جهت فعلی سند (rtl یا ltr) را تشخیص می‌دهد و با تغییر attribute dir روی <html> به‌روزرسانی می‌شود.
چه زمانی استفاده کنیم
- کامپوننت‌هایی که رفتار متفاوتی در RTL و LTR دارند (مثلاً animation direction)
- محاسبات position که به جهت متن وابسته هستند
- کتابخانه‌های third-party که به صورت programmatic نیاز به جهت دارند
چه زمانی استفاده نکنیم
- برای استایل‌دهی ساده — از Tailwind
rtl:وltr:modifiers استفاده کنید - برای چرخاندن آیکون‌ها —
rtl:rotate-180کافی است - برای فضابندی — از CSS Logical Properties (
ps-,pe-,ms-,me-) استفاده کنید
استفاده
import { useDocumentDirection } from '@parto-system-design/ui'
function AnimatedPanel() {
const direction = useDocumentDirection()
// انیمیشن slide باید بر اساس جهت متن تغییر کند
const slideFrom = direction === 'rtl' ? 'translateX(100%)' : 'translateX(-100%)'
return <div style={{ transform: isOpen ? 'translateX(0)' : slideFrom }}>محتوای پنل</div>
}پارامترها
این هوک هیچ پارامتری دریافت نمی‌کند.
مقدار بازگشتی
| نوع | توضیح |
|---|---|
'rtl' | 'ltr' | جهت فعلی سند |
جزئیات فنی
- مقدار اولیه:
'rtl'(چون پرتو RTL-first است) - واکنش‌پذیر: با
MutationObserverتغییراتdirattribute را رصد می‌کند - SSR-safe: در سرور مقدار
'rtl'برمی‌گرداند - منبع: ابتدا
dirattribute، سپسcomputed styleرا بررسی می‌کند
هوک‌های مرتبط
- اگر نیاز به تشخیص موبایل/دسکتاپ دارید → useIsMobile
- اگر نیاز به خواندن CSS variables تم دارید → useRootStyles