Utilities
Installation
CLI
npx shadcn@latest add "https://diceui.com/r/direction-provider"pnpm dlx shadcn@latest add "https://diceui.com/r/direction-provider"yarn dlx shadcn@latest add "https://diceui.com/r/direction-provider"bun x shadcn@latest add "https://diceui.com/r/direction-provider"Manual
Install the following dependencies:
npm install @diceui/direction-providerpnpm add @diceui/direction-provideryarn add @diceui/direction-providerbun add @diceui/direction-providerCopy 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.
| Prop | Type | Default |
|---|---|---|
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>
)
}