Direction

Un fournisseur de contexte qui permet de basculer les composants entre les orientations LTR et «RTL », afin que les menus, les curseurs et les onglets s'affichent correctement en arabe, en hébreu et en persan.

Le composant DirectionProvider définit le sens du texte (ltr ou rtl) de votre application. Il est indispensable pour prendre en charge les langues qui s’écrivent de droite à gauche, comme l’arabe, l’hébreu et le persan.

Voici un aperçu du composant en mode RTL. Utilisez le sélecteur de langue pour changer de langue. Pour d’autres exemples, repérez la section RTL sur les pages des composants.

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

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

Enveloppez-en votre arborescence une seule fois et chaque composant sensible à la direction — menus déroulants, curseurs, onglets, infobulles — lira la direction depuis le contexte React au lieu de sonder le DOM. Construit sur l’utilitaire Base UI Direction Provider ; il ne rend rien et n’embarque aucun style propre — les bordures et les ombres néobrutalistes vivent dans les composants qu’il pilote.

À privilégier pour :

Applications en arabe, en hébreu ou en persan — la navigation aux flèches, l’alignement des popups et le comportement des curseurs s’inversent avec le sens de lecture.
Un sélecteur de langue — basculez la direction du provider en même temps que l’attribut dir de <html> quand l’utilisateur change de langue.
Pages à directions mixtes — imbriquez un provider autour d’un bloc RTL (un formulaire intégré, une citation) au sein d’une application par ailleurs LTR.

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

Installez les dépendances suivantes :


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

Copiez-collez le code suivant dans votre projet.

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 }

Adaptez les chemins d’import à la structure de votre projet.

Utilisation

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

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

useDirection

Le hook useDirection permet de récupérer le sens courant de l’application.

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

Accessibilité

DirectionProvider ne pilote que la logique des composants — il ne définit jamais l’attribut dir. Définissez toujours dir sur <html> (ou sur l’élément englobant) en parallèle : les navigateurs, les lecteurs d’écran et les propriétés logiques CSS déterminent la direction à partir de l’attribut du DOM, pas du contexte React. C’est en gardant les deux synchronisés qu’une page RTL s’affiche et se lit correctement.

Direction

Installation#