DirectionProviderWrapper() — ui Function Reference

Architecture documentation for the DirectionProviderWrapper() function in component-preview-tabs.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ DirectionProviderWrapper() — ui Function Reference

Dependency Diagram

graph TD
  ab0a9106_4c48_7cb0_69d8_00a11a72eebf["DirectionProviderWrapper()"]
  4f013dc0_9743_fe6f_61c3_b1ba0cbcf391["component-preview-tabs.tsx"]
  ab0a9106_4c48_7cb0_69d8_00a11a72eebf -->|defined in| 4f013dc0_9743_fe6f_61c3_b1ba0cbcf391
  style ab0a9106_4c48_7cb0_69d8_00a11a72eebf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/component-preview-tabs.tsx lines 246–267

function DirectionProviderWrapper({
  base,
  dir: explicitDir,
  children,
}: {
  base?: string
  dir?: "ltr" | "rtl"
  children: React.ReactNode
}) {
  // useTranslation handles the case when there's no LanguageProvider context.
  // It will fall back to local state with defaultLanguage.
  const translation = useTranslation(directionTranslations, "ar")
  const dir = explicitDir ?? translation.dir

  if (base === "base") {
    return (
      <BaseDirectionProvider direction={dir}>{children}</BaseDirectionProvider>
    )
  }

  return <RadixDirectionProvider dir={dir}>{children}</RadixDirectionProvider>
}