Direction Provider

Installation

CLI

npx shadcn@latest add "https://maksud.dev/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.

AutoTypeTable temporarily disabled - debugging stack overflow issue

{
  "path": "./types/docs/utilities.ts",
  "name": "DirectionProviderProps"
}

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>
  )
}