useDocumentDirection

معرفی

هوک useDocumentDirection جهت فعلی سند (rtl یا ltr) را تشخیص می‌دهد و با تغییر attribute dir روی <html> به‌روزرسانی می‌شود.

چه زمانی استفاده کنیم

• کامپوننت‌هایی که رفتار متفاوتی در RTL و LTR دارند (مثلاً animation direction)
• محاسبات position که به جهت متن وابسته هستند
• کتابخانه‌های third-party که به صورت programmatic نیاز به جهت دارند

چه زمانی استفاده نکنیم

• برای استایل‌دهی ساده — از Tailwind rtl: و ltr: modifiers استفاده کنید
• برای آیکون‌های جهت‌دار کامپوننت‌های DS (جداکنندهٔ Breadcrumb، فلش‌های Pagination و Carousel، شِورون زیرمنو) — خودشان جهت را از dir خود یا نزدیک‌ترین DirectionProvider می‌خوانند؛ آیکونشان را عوض نکنید و به آن‌ها rtl:rotate-180 ندهید
• برای آیکون جهت‌دار خودتان — rtl:rotate-180 کافی است، مگر داخل جزیره‌ای با dir="ltr" در صفحهٔ راست‌به‌چپ (مثل شماره‌ها)؛ آنجا واریانت rtl: هنوز فعال است و باید جهت را با useDirection بخوانید
• برای خواندن جهتِ یک کامپوننت (نه کل سند) — useDirection(dir) که dir خود کامپوننت، سپس DirectionProvider و در آخر جهت سند را برمی‌گرداند
• برای فضابندی — از CSS Logical Properties (ps-, pe-, ms-, me-) استفاده کنید

استفاده

import { useDocumentDirection } from '@partodata/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' (چون پرتو RTL-first است)
• واکنش‌پذیر: با MutationObserver تغییرات dir attribute را رصد می‌کند
• SSR-safe: در سرور مقدار 'rtl' برمی‌گرداند
• منبع: ابتدا dir attribute، سپس computed style را بررسی می‌کند

هوک‌های مرتبط

• اگر نیاز به تشخیص موبایل/دسکتاپ دارید → useIsMobile
• اگر نیاز به خواندن CSS variables تم دارید → useRootStyles