Direction

npm install @radix-ui/react-direction

interface DirectionProviderProps {
  children?: React.ReactNode;
  dir: 'ltr' | 'rtl';
}

function useDirection(localDir?: 'ltr' | 'rtl'): 'ltr' | 'rtl'

import { DirectionProvider } from '@radix-ui/react-direction';

function App() {
  const [dir, setDir] = useState<'ltr' | 'rtl'>('ltr');

  return (
    <DirectionProvider dir={dir}>
      <YourApp />
      <button onClick={() => setDir(dir === 'ltr' ? 'rtl' : 'ltr')}>
        Toggle Direction
      </button>
    </DirectionProvider>
  );
}

import { useDirection } from '@radix-ui/react-direction';

function NavigationArrow() {
  const direction = useDirection();
  
  return (
    <button>
      {direction === 'ltr' ? '→' : '←'}
    </button>
  );
}

import { useDirection } from '@radix-ui/react-direction';

function Component({ dir }: { dir?: 'ltr' | 'rtl' }) {
  // Local dir prop overrides context
  const direction = useDirection(dir);
  
  return (
    <div style={{ direction }}>
      Content respects {direction} direction
    </div>
  );
}

import { useDirection } from '@radix-ui/react-direction';

function Card() {
  const direction = useDirection();
  
  return (
    <div
      style={{
        paddingLeft: direction === 'ltr' ? '20px' : '0',
        paddingRight: direction === 'rtl' ? '20px' : '0',
      }}
    >
      Card content
    </div>
  );
}

import { DirectionProvider } from '@radix-ui/react-direction';
import { useState } from 'react';

const languages = {
  en: { dir: 'ltr', name: 'English' },
  ar: { dir: 'rtl', name: 'العربية' },
  he: { dir: 'rtl', name: 'עברית' },
} as const;

function App() {
  const [locale, setLocale] = useState<keyof typeof languages>('en');
  const { dir, name } = languages[locale];

  return (
    <DirectionProvider dir={dir}>
      <div dir={dir}>
        <select 
          value={locale} 
          onChange={(e) => setLocale(e.target.value as keyof typeof languages)}
        >
          {Object.entries(languages).map(([code, { name }]) => (
            <option key={code} value={code}>{name}</option>
          ))}
        </select>
        <YourApp />
      </div>
    </DirectionProvider>
  );
}

import { useDirection } from '@radix-ui/react-direction';
import { useCallback } from 'react';

function Slider({ value, onChange }: { 
  value: number; 
  onChange: (value: number) => void;
}) {
  const direction = useDirection();
  
  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
    const isLTR = direction === 'ltr';
    
    if (event.key === 'ArrowRight') {
      // In RTL, right arrow should decrease value
      onChange(value + (isLTR ? 1 : -1));
    } else if (event.key === 'ArrowLeft') {
      // In RTL, left arrow should increase value
      onChange(value + (isLTR ? -1 : 1));
    }
  }, [direction, value, onChange]);

  return (
    <div 
      role="slider" 
      aria-valuenow={value}
      onKeyDown={handleKeyDown}
      tabIndex={0}
    >
      {value}
    </div>
  );
}

import { DirectionProvider, useDirection } from '@radix-ui/react-direction';

function App() {
  return (
    <DirectionProvider dir="ltr">
      <Page>
        {/* Nested provider for a specific section */}
        <DirectionProvider dir="rtl">
          <ArabicContent />
        </DirectionProvider>
      </Page>
    </DirectionProvider>
  );
}

function ArabicContent() {
  const direction = useDirection(); // Returns 'rtl'
  return <div dir={direction}>محتوى عربي</div>;
}

type Direction = 'ltr' | 'rtl';

interface DirectionProviderProps {
  children?: React.ReactNode;
  dir: Direction;
}

function useDirection(localDir?: Direction): Direction