Pular para o conteúdo
1.6k

Direção

Um provedor de contexto que alterna os componentes entre LTR (da esquerda para a direita) e RTL, para que menus, controles deslizantes e abas sejam exibidos corretamente em árabe, hebraico e persa.

O componente DirectionProvider é usado para definir a direção do texto (ltr ou rtl) do seu aplicativo. Isso é essencial para dar suporte a idiomas escritos da direita para a esquerda, como árabe, hebraico e persa.

Aqui está uma prévia do componente no modo RTL. Use o seletor de idioma para trocar de idioma. Para ver mais exemplos, procure a seção RTL nas páginas dos componentes.

Envolva sua árvore uma única vez e todo componente sensível à direção — menus dropdown, sliders, abas, tooltips — passa a ler a direção do contexto do React em vez de inspecionar o DOM. Construído sobre o utilitário Base UI Direction Provider; ele não renderiza nada e não traz estilo próprio — as bordas e sombras neobrutalistas ficam nos componentes que ele orienta.

Quando usar:

  • Apps em árabe, hebraico ou persa — a navegação por setas, o alinhamento de popups e o comportamento dos sliders se invertem junto com a direção de leitura.
  • Um seletor de idioma — troque o direction do provider junto com o dir no <html> quando o usuário mudar de idioma.
  • Páginas com direções mistas — aninhe um provider em torno de um bloco RTL (um formulário incorporado, conteúdo citado) dentro de um app que, no restante, é LTR.

Instalação

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

Instale as seguintes dependências:

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

Copie e cole o código a seguir no seu projeto.

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 }

Atualize os caminhos de importação de acordo com a configuração do seu projeto.

Uso

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

useDirection

O hook useDirection é usado para obter a direção atual do aplicativo.

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

Acessibilidade

DirectionProvider orienta apenas a lógica dos componentes — ele nunca define o atributo dir. Defina sempre o dir também no <html> (ou no elemento que envolve a árvore): navegadores, leitores de tela e propriedades lógicas de CSS resolvem a direção a partir do atributo no DOM, não do contexto do React. Manter os dois em sincronia é o que faz uma página RTL renderizar e ser lida corretamente.