Richting

Een contextprovider die componenten omzet tussen LTR en RTL, zodat menu’s, schuifbalken en tabbladen correct worden weergegeven in het Arabisch, Hebreeuws en Perzisch.

Het DirectionProvider-component wordt gebruikt om de tekstrichting (ltr of rtl) van je applicatie in te stellen. Dit is essentieel voor de ondersteuning van talen die van rechts naar links worden geschreven, zoals Arabisch, Hebreeuws en Perzisch.

Hier is een voorbeeldweergave van het component in de RTL-modus. Gebruik de taalkiezer om de taal te wisselen. Zoek voor meer voorbeelden naar de RTL-sectie op de componentpagina's.

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

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

Wikkel hem één keer om je componentenboom en elke richtingsbewuste component — dropdownmenu’s, sliders, tabs, tooltips — leest de richting uit de React-context in plaats van de DOM af te tasten. Gebouwd op de Base UI Direction Provider-utility; hij rendert zelf niets en brengt geen eigen styling mee — de neobrutalistische randen en schaduwen zitten in de componenten die hij aanstuurt.

Ideaal voor:

Arabische, Hebreeuwse of Perzische apps — pijltjesnavigatie, uitlijning van pop-ups en slidergedrag draaien mee met de leesrichting.
Een taalwisselaar — schakel de direction van de provider samen met dir op <html> om wanneer de gebruiker van taal wisselt.
Pagina’s met gemengde richtingen — nestel een provider rond een RTL-blok (een ingesloten formulier, geciteerde content) in een app die verder LTR is.

Installatie


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

Installeer de volgende afhankelijkheden:


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

Kopieer en plak de volgende code in je project.

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 }

Werk de importpaden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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

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

useDirection

De useDirection-hook wordt gebruikt om de huidige richting van de applicatie op te halen.

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

Toegankelijkheid

DirectionProvider stuurt alleen componentlogica aan — hij zet nooit het dir-attribuut. Zet daarom ook altijd dir op <html> (of op het omhullende element): browsers, schermlezers en logische CSS-properties bepalen de richting via het DOM-attribuut, niet via de React-context. Doordat die twee synchroon blijven, wordt een RTL-pagina zowel correct weergegeven als correct voorgelezen.

Richting

Installatie#