\n\n \n ```\n\n \n \n ```svelte fileName=\"Hero.svelte\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n \n\n
\n

{$content.headline}

\n {$content.cta}\n
\n ```\n\n \n \n ```tsx fileName=\"Hero.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"preact-intlayer\";\n\n export const Hero = () => {\n const { headline, cta } = useIntlayer(\"hero-banner\");\n // → डिफ़ॉल्ट वेरिएंट\n\n return (\n
\n

{headline}

\n {cta}\n
\n );\n };\n ```\n\n \n \n ```tsx fileName=\"Hero.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"solid-intlayer\";\n\n export const Hero = () => {\n const content = useIntlayer(\"hero-banner\");\n // → डिफ़ॉल्ट वेरिएंट\n\n return (\n
\n

{content().headline}

\n {content().cta}\n
\n );\n };\n ```\n\n \n \n ```typescript fileName=\"hero.component.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-hero\",\n template: `\n
\n

{{ content().headline }}

\n {{ content().cta }}\n
\n `,\n })\n export class HeroComponent {\n content = useIntlayer(\"hero-banner\");\n }\n ```\n\n \n \n ```javascript fileName=\"hero.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const { headline, cta } = useIntlayer(\"hero-banner\");\n\n document.body.innerHTML = `\n
\n

${headline}

\n ${cta}\n
\n `;\n ```\n\n \n\n\n### नामित वेरिएंट\n\n```tsx\nconst { headline, cta } = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n});\n```\n\n### स्पष्ट भाषा विकल्प के साथ नामित वेरिएंट\n\n```tsx\nconst content = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n locale: \"hi\",\n});\n```\n\n## विशिष्ट उपयोग के मामले\n\n- एक परीक्षण कुंजी द्वारा संचालित A/B प्रतिलिपि परीक्षण\n- मौसमी या प्रचार बैनर\n- फीचर-फ़्लैग्ड मैसेजिंग\n- स्थानीय बाजार के विशिष्ट अभियान\n","description":"कोड परिवर्तनों के बिना रनटाइम पर उनके बीच स्विच करने के लिए नामित सामग्री विकल्पों (A/B परीक्षण, मौसमी बैनर, फीचर-फ़्लैग्ड प्रतिलिपि) को घोषित करने के लिए Intlayer सामग्री फ़ाइलों में variant मेटाडेटा फ़ील्ड का उपयोग करें।","url":"https://intlayer.org/hi/doc/concept/variants","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"वेरिएंट, A/B परीक्षण, फीचर फ़्लैग, डायनेमिक सामग्री, Intlayer, अंतर्राष्ट्रीयकरण","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"डेवलपर्स, सामग्री प्रबंधक"}}
    Author:
    Creation:2026-06-12Last update:2026-06-12

    वेरिएंट (Variants)

    एक वेरिएंट (variant) सामग्री फ़ाइलों का एक सेट है जो एक ही डिक्शनरी कुंजी (key) साझा करते हैं लेकिन प्रत्येक में एक अलग variant नाम होता है। Intlayer useIntlayer को दिए गए चयनकर्ता के आधार पर उपयुक्त फ़ाइल प्रस्तुत करता है।

    वेरिएंट घोषित करना

    प्रत्येक फ़ाइल एक नामित विकल्प का प्रतिनिधित्व करती है। variant फ़ील्ड को छोड़ने (या इसे "default" पर सेट करने) से यह डिफ़ॉल्ट (fallback) वेरिएंट के रूप में चिह्नित हो जाता है।

    hero-banner.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "default",
  content: {
    headline: t({
      en: "Build faster with Intlayer",
      fr: "Développez plus vite avec Intlayer",
    }),
    cta: t({ en: "Get started", fr: "Commencer" }),
  },
} satisfies Dictionary;

export default dictionary;
    hero-banner.black-friday.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "black_friday",
  content: {
    headline: t({
      en: "50 % off — today only",
      fr: "−50 % — aujourd'hui seulement",
    }),
    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
  },
} satisfies Dictionary;

export default dictionary;

    वेरिएंट का उपयोग करना

    डिफ़ॉल्ट वेरिएंट

    Hero.tsx
    import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → डिफ़ॉल्ट वेरिएंट

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

    नामित वेरिएंट

    tsx
    const { headline, cta } = useIntlayer("hero-banner", {  variant: "black_friday",});

    स्पष्ट भाषा विकल्प के साथ नामित वेरिएंट

    tsx
    const content = useIntlayer("hero-banner", {  variant: "black_friday",  locale: "hi",});

    विशिष्ट उपयोग के मामले

    • एक परीक्षण कुंजी द्वारा संचालित A/B प्रतिलिपि परीक्षण
    • मौसमी या प्रचार बैनर
    • फीचर-फ़्लैग्ड मैसेजिंग
    • स्थानीय बाजार के विशिष्ट अभियान
    संग्रहडायनामिक रिकॉर्ड