Direction

A direction provider tells the components inside it whether users read from left to right or from right to left. In a right-to-left interface, a slider counts its value from the right edge, and the left and right arrow keys swap their roles. The provider renders no element and sets no dir attribute, so the element around it sets dir to the same direction, which mirrors the layout.

UsageCopy Anchor Link

import { DirectionProvider } from "@biem/ui/components/ui/direction";
import { Slider } from "@biem/ui/components/ui/slider";

export function DirectionDefault() {
	return (
		<div className="flex w-full max-w-sm flex-col gap-3" dir="rtl">
			<DirectionProvider direction="rtl">
				<span id="reorder-level" className="text-sm font-medium">Reorder level</span>
				<Slider aria-labelledby="reorder-level" defaultValue={[25]}/>
			</DirectionProvider>
		</div>
	);
}

ExamplesCopy Anchor Link

With useDirectionCopy Anchor Link

Shared components that render an element of their own cannot count on the page around them to set the right dir attribute. Through useDirection such a component reads the direction of the nearest provider and sets dir on its element itself, so its layout mirrors together with the controls inside it and users meet one consistent reading direction.

API ReferenceCopy Anchor Link

DirectionProviderCopy Anchor Link

useDirectionCopy Anchor Link

useDirection returns the direction that the nearest DirectionProvider sets, "ltr" or "rtl". Without a provider, it returns "ltr". It is a hook, so it takes no arguments, renders no element and has no props of its own.