コンテンツへスキップ
1.6k

方向

コンテキストプロバイダーにより、コンポーネントの表示方向をLTR（左から右）とRTL（右から左）の間で切り替えることで、アラビア語、ヘブライ語、ペルシア語において、メニュー、スライダー、タブが正しく反映されるようにします。

DirectionProvider コンポーネントは、アプリケーションのテキストの方向（ltr または rtl）を設定するために使用します。これは、アラビア語、ヘブライ語、ペルシア語のような右から左へ記述する言語に対応するうえで欠かせません。

RTL モードでのコンポーネントのプレビューです。言語セレクターを使って言語を切り替えてください。ほかの使用例については、各コンポーネントページの RTL セクションをご覧ください。

ツリーを一度包むと、ドロップダウンメニュー、スライダー、タブ、ツールチップなど方向を意識するコンポーネントが、DOM を嗅がず React コンテキストから方向を読み取ります。Base UI Direction Provider ユーティリティ上に構築されています。何も描画せず、独自スタイルもありません。ネオブルータリストの枠線や影は、それが制御するコンポーネント側にあります。

次のような場面で使います：

  • アラビア語・ヘブライ語・ペルシア語のアプリ — 矢印キーナビ、ポップアップの配置、スライダー挙動が読み方向に合わせて反転します。
  • ロケール切替 — ユーザーが言語を変えたとき、プロバイダーの direction と <html> の dir を一緒に切り替えます。
  • 方向が混在するページ — 基本 LTR のアプリ内で、RTL ブロック（埋め込みフォーム、引用など）だけをプロバイダーで包みます。

インストール

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 属性は設定しません。<html>（または包む要素）にも必ず dir を付けてください。ブラウザ、スクリーンリーダー、CSS の論理プロパティは React コンテキストではなく DOM 属性から方向を解決します。両者を同期させることで、RTL ページが正しく描画され、正しく読み上げられます。