Saltar al contenido
1.6k

Dirección

Un proveedor de contexto que cambia la orientación de los componentes de izquierda a derecha (LTR) a derecha a izquierda (RTL), para que los menús, los controles deslizantes y las pestañas se muestren correctamente en árabe, hebreo y persa.

El componente DirectionProvider se usa para definir la dirección del texto (ltr o rtl) de tu aplicación. Es imprescindible para admitir idiomas que se escriben de derecha a izquierda, como el árabe, el hebreo y el persa.

Aquí tienes una vista previa del componente en modo RTL. Usa el selector de idioma para cambiar de idioma. Para ver más ejemplos, busca la sección RTL en las páginas de los componentes.

Envuélvelo una sola vez alrededor de tu árbol y todos los componentes sensibles a la dirección —menús desplegables, sliders, pestañas, tooltips— leerán la dirección desde el contexto de React en lugar de inspeccionar el DOM. Está construido sobre la utilidad Base UI Direction Provider; no renderiza nada ni aporta estilos propios: los bordes y las sombras neobrutalistas viven en los componentes que gobierna.

Recurre a este componente cuando:

  • Apps en árabe, hebreo o persa — la navegación con las flechas, la alineación de los popups y el comportamiento de los sliders se invierten con la dirección de lectura.
  • Un selector de idioma — cambia la prop direction del proveedor junto con dir en <html> cuando el usuario cambia de idioma.
  • Páginas con direcciones mixtas — anida un proveedor alrededor de un bloque RTL (un formulario incrustado, contenido citado) dentro de una app que por lo demás es LTR.

Instalación

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

Instala las siguientes dependencias:

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

Copia y pega el siguiente código en tu proyecto.

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 }

Actualiza las rutas de importación según la configuración de tu proyecto.

Uso

import { DirectionProvider } from "@/components/ui/direction"
<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

El hook useDirection se usa para obtener la dirección actual de la aplicación.

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

Accesibilidad

DirectionProvider solo gobierna la lógica de los componentes: nunca establece el atributo dir. Establece siempre dir también en <html> (o en el elemento contenedor): los navegadores, los lectores de pantalla y las propiedades lógicas de CSS resuelven la dirección a partir del atributo del DOM, no del contexto de React. Mantener ambos sincronizados es lo que hace que una página RTL se renderice y se lea correctamente.