Direction Provider

<Description>Wraps your app to provide global reading direction.</Description>

<Highlights features={["Enables all primitives to inherit global reading direction."]} />

Installation

Install the component from your command line.

npm install @radix-ui/react-direction

Anatomy

Import the component.

import { Direction } from "radix-ui";

export default () => <Direction.Provider />;

API Reference

Provider

When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the Direction.Provider component to ensure all of the primitives adjust their behavior based on the dir prop.

<PropsTable data={[ { name: "dir", required: false, type: '"ltr" | "rtl"', typeSimple: "enum", description: ( <span> The global reading direction of your application. This will be inherited by all primitives. </span> ), }, ]} />

Example

Use the direction provider.

import { Direction } from "radix-ui";

export default () => (
	<Direction.Provider dir="rtl"></Direction.Provider>
);