Напрямок

Контекстний провайдер, який перемикає компоненти між напрямками LTR та RTL, завдяки чому меню, повзунки та вкладки правильно відображаються арабською, івритом та перською мовами.

Компонент DirectionProvider використовується для встановлення напрямку тексту (ltr або rtl) вашого застосунку. Це необхідно для підтримки мов із написанням справа наліво, як-от арабська, іврит і перська.

Ось попередній перегляд компонента в режимі RTL. Використовуйте перемикач мови, щоб змінити мову. Щоб побачити більше прикладів, шукайте розділ RTL на сторінках компонентів.

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

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

Обгорніть ним дерево один раз — і кожен компонент, чутливий до напрямку (dropdown-меню, слайдери, вкладки, tooltip), читатиме напрямок із React context замість «нюхати» DOM. Побудований на утиліті Base UI Direction Provider; нічого не рендерить і не несе власних стилів — необруталістські рамки й тіні живуть у компонентах, якими він керує.

Коли це стане в пригоді:

Застосунки арабською, івритом або перською — стрілкова навігація, вирівнювання спливних вікон і поведінка слайдера віддзеркалюються з напрямком читання.
Перемикач локалі — змінюйте direction провайдера разом із dir на <html>, коли користувач змінює мову.
Сторінки зі змішаним напрямком — вкладіть провайдер навколо RTL-блоку (вбудована форма, цитований текст) всередині загалом LTR-застосунку.

Встановлення


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

Установіть наступні залежності:


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

Скопіюйте та вставте наступний код у ваш проєкт.

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 }

Оновіть шляхи імпорту відповідно до налаштувань вашого проєкту.

Використання

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

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

useDirection

Хук useDirection використовується для отримання поточного напрямку застосунку.

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

Доступність

DirectionProvider керує лише логікою компонентів — він ніколи не виставляє атрибут dir. Завжди ставте dir також на <html> (або обгортку): браузери, програми зчитування з екрана та логічні CSS-властивості визначають напрямок з DOM-атрибута, а не з React context. Синхронність обох і забезпечує коректне відображення та читання RTL-сторінки.

Напрямок

Встановлення#