Skip to main content
Search...

Direction

Global RTL/LTR direction context for primitives and registry components.

import { DirectionProvider, useDirection } from '@gentleduck/primitives/direction'
import { DirectionProvider, useDirection } from '@gentleduck/primitives/direction'

What it does

This is the single direction module used by primitives and registry-ui components.

Example

import { DirectionProvider } from '@gentleduck/primitives/direction'
import * as Dialog from '@gentleduck/primitives/dialog'
 
export function App() {
  return (
    <DirectionProvider dir="rtl">
      <Dialog.Root>
        <Dialog.Trigger>Open</Dialog.Trigger>
      </Dialog.Root>
    </DirectionProvider>
  )
}
import { DirectionProvider } from '@gentleduck/primitives/direction'
import * as Dialog from '@gentleduck/primitives/dialog'
 
export function App() {
  return (
    <DirectionProvider dir="rtl">
      <Dialog.Root>
        <Dialog.Trigger>Open</Dialog.Trigger>
      </Dialog.Root>
    </DirectionProvider>
  )
}

API

DirectionProvider

PropTypeDefaultDescription
dir'ltr' | 'rtl'--Direction value provided to descendants
childrenReact.ReactNode--Wrapped subtree

useDirection

const direction = useDirection(localDir)
const direction = useDirection(localDir)
ParamTypeDefaultDescription
localDir'ltr' | 'rtl' | undefinedundefinedOptional local override

Returns:

  • localDir when provided
  • Provider dir when available
  • 'ltr' as final fallback
MountLayer