दिशा

एक संदर्भ प्रदाता जो घटकों को LTR (दाएं से बाएं) और RTL (बाएं से दाएं) के बीच स्वचालित रूप से बदलता है, ताकि मेनू, स्लाइडर और टैब अरबी, हिब्रू और फ़ारसी में सही ढंग से प्रतिबिंबित हों।

DirectionProvider कंपोनेंट का उपयोग आपके एप्लिकेशन के लिए टेक्स्ट दिशा (ltr या rtl) सेट करने के लिए किया जाता है. यह अरबी, हिब्रू और फ़ारसी जैसी दाएं-से-बाएं लिखी जाने वाली भाषाओं को सपोर्ट करने के लिए आवश्यक है.

यहां RTL मोड में कंपोनेंट का प्रीव्यू है. भाषा बदलने के लिए भाषा सिलेक्टर का उपयोग करें. अधिक उदाहरण देखने के लिए, कंपोनेंट पेजों पर RTL सेक्शन देखें.

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

इसे एक बार ट्री के चारों ओर लपेटें और हर दिशा-सचेत कंपोनेंट — ड्रॉपडाउन मेनू, स्लाइडर, टैब, टूलटिप — दिशा React context से पढ़ेगा, DOM सूँघने के बजाय। यह Base UI Direction Provider यूटिलिटी पर बना है; यह कुछ रेंडर नहीं करता और अपनी स्टाइल नहीं भेजता — नियोब्रूटलिस्ट बॉर्डर और छायाएँ उन्हीं कंपोनेंट में रहती हैं जिन्हें यह चलाता है।

इसे इन स्थितियों में चुनें:

अरबी, हिब्रू या फ़ारसी ऐप — एरो-कुंजी नेविगेशन, पॉपअप अलाइनमेंट और स्लाइडर व्यवहार पढ़ने की दिशा के साथ पलटते हैं।
लोकेल स्विचर — भाषा बदलते समय प्रोवाइडर की direction को <html> पर dir के साथ पलटें।
मिश्रित-दिशा पेज — अन्यथा LTR ऐप में RTL ब्लॉक (एम्बेडेड फ़ॉर्म, उद्धृत कंटेंट) के चारों ओर प्रोवाइडर नेस्ट करें।

इंस्टॉलेशन


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
npx shadcn@latest add https://neobrutalism.com/r/base/direction.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/direction.json

निम्नलिखित डिपेंडेंसी इंस्टॉल करें:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

निम्नलिखित कोड को अपने प्रोजेक्ट में कॉपी और पेस्ट करें.

components/ui/direction.tsx

"use client"

import * as React from "react"
import { Direction } from "radix-ui"

function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof Direction.DirectionProvider> & {
  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
}) {
  return (
    <Direction.DirectionProvider dir={direction ?? dir}>
      {children}
    </Direction.DirectionProvider>
  )
}

const useDirection = Direction.useDirection

export { DirectionProvider, useDirection }

अपने प्रोजेक्ट सेटअप के अनुसार इंपोर्ट पाथ अपडेट करें.

उपयोग

import { DirectionProvider } from "@/components/ui/direction"

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

useDirection हुक का उपयोग एप्लिकेशन की वर्तमान दिशा प्राप्त करने के लिए किया जाता है.

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

एक्सेसिबिलिटी

DirectionProvider सिर्फ़ कंपोनेंट लॉजिक चलाता है — कभी dir एट्रिब्यूट सेट नहीं करता। हमेशा <html> (या रैपिंग एलिमेंट) पर भी dir सेट करें: ब्राउज़र, स्क्रीन रीडर और CSS logical properties दिशा DOM एट्रिब्यूट से निकालते हैं, React context से नहीं। दोनों को सिंक रखना ही RTL पेज को सही रेंडर और पढ़ने योग्य बनाता है।

दिशा

इंस्टॉलेशन#