Skip to content

Early previewhamur is not on npm yet. The components are being built in the open, follow along on GitHub.

UtilitiesReact

Direction Provider

Enables right-to-left behavior for the Base UI components inside it.

Direction Provider renders nothing to look at; its usage is in the code.

import type { ReactNode } from 'react'
import { DirectionProvider } from '@hamur/react/direction-provider'

export default function Providers(props: { children: ReactNode }) {
  return (
    <DirectionProvider>
      {props.children}
    </DirectionProvider>
  )
}
4Tests passing in React · 0 failing
0.3 KiBSize
Not measured yetMemory
Not measured yetSpeed
productdevbook and 7 upstream authors6 commits · last

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<DirectionProvider />

Examples

The demo at the top is the one example this component has so far.

API reference

2 props across 1 parts, in React syntax.

DirectionProviderDirectionProvider

Enables RTL behavior for Base UI components.

DirectionProvider props
PropTypeDefault
directionThe reading direction of the textTextDirection'ltr'
childrenReact.ReactNode—

Keyboard and accessibility

Keyboard

DirectionProvider adds no keys; it flips the arrow keys of the components inside, so ArrowLeft moves forward in a right-to-left slider or toolbar.

Accessibility

What the parts set
PartSetsSo that
DirectionProviderno attribute; set dir="rtl" on an element yourselfthe browser lays out and reads text right to left, and the components move the same way

Focus order

  1. DirectionProvider adds no element and no tab stop.