Richtung

Ein Kontext-Provider, der Komponenten zwischen LTR und RTL umschaltet, sodass Menüs, Schieberegler und Registerkarten auf Arabisch, Hebräisch und Persisch korrekt gespiegelt werden.

Die Komponente DirectionProvider wird verwendet, um die Textrichtung (ltr oder rtl) deiner Anwendung festzulegen. Das ist unerlässlich, um von rechts nach links geschriebene Sprachen wie Arabisch, Hebräisch und Persisch zu unterstützen.

Hier ist eine Vorschau der Komponente im RTL-Modus. Verwende die Sprachauswahl, um die Sprache zu wechseln. Weitere Beispiele findest du im RTL-Abschnitt auf den Komponentenseiten.

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

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

Einmal um deinen Komponentenbaum gelegt, liest jede richtungsbewusste Komponente – Dropdown-Menüs, Slider, Tabs, Tooltips – die Leserichtung aus dem React-Context, statt im DOM nachzusehen. Basiert auf dem Utility Base UI Direction Provider; es rendert nichts und bringt kein eigenes Styling mit – die neobrutalistischen Rahmen und Schatten stecken in den Komponenten, die es steuert.

Typische Anwendungsfälle:

Apps auf Arabisch, Hebräisch oder Persisch – Pfeiltasten-Navigation, Popup-Ausrichtung und Slider-Verhalten drehen sich mit der Leserichtung.
Ein Sprachumschalter – stelle die direction des Providers zusammen mit dir auf <html> um, wenn die Sprache gewechselt wird.
Seiten mit gemischter Richtung – verschachtle einen Provider um einen RTL-Block (ein eingebettetes Formular, zitierte Inhalte) innerhalb einer ansonsten LTR-App.

Installation


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

Installiere die folgenden Abhängigkeiten:


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

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

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 }

Passe die Importpfade an deine Projektkonfiguration an.

Verwendung

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

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

useDirection

Der useDirection-Hook wird verwendet, um die aktuelle Richtung der Anwendung abzurufen.

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

Barrierefreiheit

DirectionProvider steuert ausschließlich die Komponentenlogik – das dir-Attribut setzt er nie. Setze dir deshalb immer zusätzlich auf <html> (oder dem umschließenden Element): Browser, Screenreader und logische CSS-Eigenschaften leiten die Richtung aus dem DOM-Attribut ab, nicht aus dem React-Context. Erst wenn beide synchron bleiben, wird eine RTL-Seite korrekt gerendert und korrekt vorgelesen.

Richtung

Installation#