Arah

Penyedia konteks yang mengubah orientasi komponen antara LTR (kiri ke kanan) dan RTL (kanan ke kiri) sehingga menu, slider, dan tab ditampilkan dengan benar dalam bahasa Arab, Ibrani, dan Persia.

Komponen DirectionProvider digunakan untuk mengatur arah teks (ltr atau rtl) aplikasi Anda. Ini penting untuk mendukung bahasa yang ditulis dari kanan ke kiri seperti Arab, Ibrani, dan Persia.

Berikut pratinjau komponen dalam mode RTL. Gunakan pemilih bahasa untuk mengganti bahasa. Untuk melihat contoh lainnya, cari bagian RTL di halaman komponen.

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

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

Bungkus pohon komponen Anda sekali saja, dan setiap komponen yang peka arah — menu dropdown, slider, tab, tooltip — akan membaca arah dari konteks React alih-alih memeriksanya dari DOM. Dibangun di atas utilitas Base UI Direction Provider; komponen ini tidak merender apa pun dan tidak membawa gaya sendiri — garis tepi dan bayangan neobrutalis berada pada komponen-komponen yang dikendalikannya.

Gunakan komponen ini saat:

Aplikasi berbahasa Arab, Ibrani, atau Persia — navigasi tombol panah, penjajaran popup, dan perilaku slider ikut berbalik mengikuti arah baca.
Pengalih bahasa — ubah direction pada provider bersamaan dengan dir pada <html> saat pengguna berganti bahasa.
Halaman dengan arah campuran — sarangkan provider di sekeliling blok RTL (formulir tersemat, konten kutipan) di dalam aplikasi yang selebihnya LTR.

Instalasi


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

Instal dependensi berikut:


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

Salin dan tempel kode berikut ke dalam proyek Anda.

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 }

Perbarui jalur impor agar sesuai dengan pengaturan proyek Anda.

Penggunaan

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

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

useDirection

Hook useDirection digunakan untuk mendapatkan arah aplikasi saat ini.

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

Aksesibilitas

DirectionProvider hanya mengarahkan logika komponen — ia tidak pernah menyetel atribut dir. Selalu setel dir pada <html> (atau elemen pembungkusnya) juga: browser, pembaca layar, dan properti logis CSS menentukan arah dari atribut DOM, bukan dari konteks React. Menjaga keduanya tetap sinkron itulah yang membuat halaman RTL tampil sekaligus terbaca dengan benar.

Arah

Instalasi#