Direzione

Un provider di contesto che inverte l'orientamento dei componenti tra LTR e RTL, in modo che menu, cursori e schede si visualizzino correttamente in arabo, ebraico e persiano.

Il componente DirectionProvider si usa per impostare la direzione del testo (ltr o rtl) della tua applicazione. È essenziale per supportare le lingue che si scrivono da destra a sinistra, come l'arabo, l'ebraico e il persiano.

Ecco un'anteprima del componente in modalità RTL. Usa il selettore della lingua per cambiare lingua. Per vedere altri esempi, cerca la sezione RTL nelle pagine dei componenti.

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

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

Avvolgilo una sola volta attorno al tuo albero e ogni componente sensibile alla direzione — menu a discesa, slider, tab, tooltip — leggerà la direzione dal contesto React invece di andarla a cercare nel DOM. Costruito sull’utility Base UI Direction Provider; non rende nulla e non porta stili propri — i bordi e le ombre neobrutalisti vivono nei componenti che guida.

Quando usarlo:

App in arabo, ebraico o persiano — la navigazione con i tasti freccia, l’allineamento dei popup e il comportamento degli slider si invertono con la direzione di lettura.
Un selettore di lingua — cambia la direction del provider insieme a dir su <html> quando l’utente cambia lingua.
Pagine a direzione mista — annida un provider attorno a un blocco RTL (un form incorporato, contenuti citati) all’interno di un’app altrimenti LTR.

Installazione


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

Installa le seguenti dipendenze:


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

Copia e incolla il seguente codice nel tuo progetto.

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 }

Aggiorna i percorsi di importazione in base alla configurazione del tuo progetto.

Utilizzo

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

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

useDirection

L'hook useDirection si usa per ottenere la direzione corrente dell'applicazione.

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

Accessibilità

DirectionProvider guida soltanto la logica dei componenti — non imposta mai l’attributo dir. Imposta sempre anche dir su <html> (o sull’elemento contenitore): browser, screen reader e proprietà logiche CSS ricavano la direzione dall’attributo nel DOM, non dal contesto React. Tenere i due sincronizzati è ciò che permette a una pagina RTL di essere sia resa sia letta correttamente.

Direzione

Installazione#