Dice UI
Utilities

Direction Provider

Provides bidirectional text support (RTL/LTR) across your application.

API

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/direction-provider"

Manual

Install the following dependencies:

npm install @diceui/direction-provider

Copy and paste the following code into your project.

"use client";
 
import * as React from "react";
 
type Direction = "ltr" | "rtl";
 
const DirectionContext = React.createContext<Direction | undefined>(undefined);
 
function useDirection(dirProp?: Direction): Direction {
  const contextDir = React.useContext(DirectionContext);
  if (!contextDir) {
    throw new Error("useDirection must be used within a DirectionProvider");
  }
  return dirProp ?? contextDir ?? "ltr";
}
 
interface DirectionProviderProps {
  children: React.ReactNode;
  dir: Direction;
}
 
function DirectionProvider({ children, dir }: DirectionProviderProps) {
  return (
    <DirectionContext.Provider value={dir}>
      {children}
    </DirectionContext.Provider>
  );
}
 
export { DirectionProvider, useDirection };

Usage

import { DirectionProvider } from "@diceui/direction-provider"
 
export default function App() {
  return (
    <DirectionProvider dir="ltr">
      <YourApp />
    </DirectionProvider>
  )
}

API Reference

DirectionProvider

Manages direction context for the useDirection hook.

PropTypeDefault
dir
"ltr" | "rtl"
"ltr"

useDirection

A hook to access the current direction.

import { useDirection } from "@/components/direction-provider"
 
function Component() {
  const dir = useDirection()
  
  return (
    <button dir={dir}>
      Do a kickflip
    </button>
  )
}

Previous

Composition

Next

Portal

On this page