Author:

Creation:2025-02-07Last update:2025-06-29

इस दस्तावेज़ को अपने पसंदीदा AI एसिस्टेंट के साथ संदर्भित करेंChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके

इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।

अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखें

इस दस्तावेज़ को संपादित करें

अगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।

दस्तावेज़ के लिए GitHub लिंक

Copy

दस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें

Conditional Content / Condition in Intlayer

Name: Intlayer
Author: Intlayer

शर्त कैसे काम करती है

Intlayer में, सशर्त सामग्री cond फ़ंक्शन के माध्यम से प्राप्त की जाती है, जो विशिष्ट शर्तों (आमतौर पर बूलियन मान) को उनकी संबंधित सामग्री से मैप करता है। यह दृष्टिकोण आपको दी गई शर्त के आधार पर सामग्री को गतिशील रूप से चुनने में सक्षम बनाता है। जब React Intlayer या Next Intlayer के साथ एकीकृत किया जाता है, तो रनटाइम पर प्रदान की गई शर्त के अनुसार उपयुक्त सामग्री स्वचालित रूप से चुनी जाती है।

सशर्त सामग्री सेट करना

अपने Intlayer प्रोजेक्ट में सशर्त सामग्री सेट करने के लिए, एक सामग्री मॉड्यूल बनाएं जिसमें आपकी सशर्त परिभाषाएँ शामिल हों। नीचे विभिन्न प्रारूपों में उदाहरण दिए गए हैं।

**/*.content.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { cond, type Dictionary } from "intlayer";

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "मेरी सामग्री जब यह सत्य है",
      false: "मेरी सामग्री जब यह असत्य है",
      fallback: "मेरी सामग्री जब शर्त विफल होती है", // वैकल्पिक
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

यदि कोई फॉलबैक घोषित नहीं किया गया है, तो यदि शर्त मान्य नहीं है, तो अंतिम घोषित कुंजी को फॉलबैक के रूप में लिया जाएगा।

React Intlayer के साथ सशर्त सामग्री का उपयोग करना

To utilize conditional content within a React component, import and use the useIntlayer hook from the react-intlayer package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.

**/*.tsx

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const ConditionalComponent: FC = () => {
const { myCondition } = useIntlayer("my_key");

return (
  <div>
    <p>
      {
        /* Output: my content when it's true */
        myCondition(true)
      }
    </p>
    <p>
      {
        /* Output: my content when it's false */
        myCondition(false)
      }
    </p>
    <p>
      {
        /* Output: my content when the condition fails */
        myCondition("")
      }
    </p>
    <p>
      {
        /* Output: my content when the condition fails */
        myCondition(undefined)
      }
    </p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const ConditionalComponent: FC = () => {
const { myCondition } = useIntlayer("my_key");

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myCondition } = useIntlayer("my_key");</script><template><div>  <p>{{ myCondition(true) }}</p>  <p>{{ myCondition(false) }}</p></div></template>

To utilize conditional content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><p>{$content.myCondition(true)}</p><p>{$content.myCondition(false)}</p></div>

To utilize conditional content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const ConditionalComponent: FC = () => {
const { myCondition } = useIntlayer("my_key");

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const ConditionalComponent: Component = () => {
const { myCondition } = useIntlayer("my_key");

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-conditional",template: `  <div>    <p>{{ content().myCondition(true) }}</p>    <p>{{ content().myCondition(false) }}</p>  </div>`,})export class ConditionalComponent {content = useIntlayer("my_key");}

To utilize conditional content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
document.getElementById("true-content")!.textContent =
  newContent.myCondition(true);
document.getElementById("false-content")!.textContent =
  newContent.myCondition(false);
});

// Initial render
document.getElementById("true-content")!.textContent =
content.myCondition(true);
document.getElementById("false-content")!.textContent =
content.myCondition(false);

अतिरिक्त संसाधन

कॉन्फ़िगरेशन और उपयोग पर अधिक विस्तृत जानकारी के लिए, निम्नलिखित संसाधनों का संदर्भ लें:

ये संसाधन विभिन्न वातावरणों और फ्रेमवर्क्स में Intlayer की सेटअप और उपयोग पर और अधिक जानकारी प्रदान करते हैं।

गणना लिंग