כיוון

ספק הקשר שמבצע היפוך של רכיבים בין כיוון קריאה משמאל לימין (LTR) לכיוון קריאה מימין לשמאל (RTL), כך שתפריטים, סליידרים ולשוניות יופיעו כהלכה בערבית, בעברית ובפרסית.

רכיב DirectionProvider משמש להגדרת כיוון הטקסט (ltr או rtl) של האפליקציה שלכם. הוא חיוני לתמיכה בשפות הנכתבות מימין לשמאל כמו ערבית, עברית ופרסית.

לפניכם תצוגה מקדימה של הרכיב במצב RTL. השתמשו בבורר השפה כדי להחליף שפה. לדוגמאות נוספות, חפשו את מקטע ה-RTL בעמודי הרכיבים.

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

עטפו אותו סביב העץ פעם אחת וכל רכיב שמודע לכיוון — תפריטי dropdown, sliders, tabs, tooltips — קורא את הכיוון מ-React context במקום לרחרח את ה-DOM. נבנה על כלי Base UI Direction Provider; הוא לא מרנדר כלום ולא מגיע עם עיצוב משלו — המסגרות והצללים הנאו-ברוטליסטיים חיים ברכיבים שהוא מנווט.

השתמשו בו כש:

אפליקציות בערבית, עברית או פרסית — ניווט במקשי חצים, יישור popups והתנהגות slider מתהפכים עם כיוון הקריאה.
מחליף שפה — הופכים את direction של ה-provider יחד עם dir על <html> כשהמשתמשים מחליפים שפה.
עמודים מעורבי-כיוון — מקננים provider סביב בלוק RTL (טופס מוטמע, תוכן מצוטט) בתוך אפליקציית LTR.

התקנה


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
npx shadcn@latest add https://neobrutalism.com/r/base/direction.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/direction.json

התקינו את התלויות הבאות:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

העתיקו והדביקו את הקוד הבא לתוך הפרויקט שלכם.

components/ui/direction.tsx

"use client"

import * as React from "react"
import { Direction } from "radix-ui"

function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof Direction.DirectionProvider> & {
  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
}) {
  return (
    <Direction.DirectionProvider dir={direction ?? dir}>
      {children}
    </Direction.DirectionProvider>
  )
}

const useDirection = Direction.useDirection

export { DirectionProvider, useDirection }

עדכנו את נתיבי הייבוא כך שיתאימו למבנה הפרויקט שלכם.

שימוש

import { DirectionProvider } from "@/components/ui/direction"

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

ה-hook useDirection משמש לקבלת הכיוון הנוכחי של האפליקציה.

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

נגישות

DirectionProvider מנווט רק לוגיקת רכיבים — הוא אף פעם לא מגדיר את מאפיין dir. תמיד הגדירו גם dir על <html> (או על אלמנט העטיפה): דפדפנים, קוראי מסך ומאפייני CSS לוגיים פותרים כיוון ממאפיין ה-DOM, לא מ-React context. שמירה על סנכרון בין השניים היא מה שגורם לעמוד RTL גם להירנדר וגם להיקרא נכון.

כיוון

התקנה#