Bir varyant (variant), aynı sözlük anahtarını (key) paylaşan ancak her biri farklı bir variant adı taşıyan içerik dosyaları kümesidir. Intlayer, useIntlayer fonksiyonuna geçirilen seçiciye göre uygun dosyayı sunar.

Varyantları bildirme

Her dosya adlandırılmış bir alternatifi temsil eder. variant alanının atlanması (veya "default" olarak ayarlanması) onu varsayılan (fallback) varyant olarak işaretler.

hero-banner.content.ts

Kodu kopyala

Kodu panoya kopyala

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

Kodu kopyala

Kodu panoya kopyala

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;

Varyantları tüketme

Varsayılan varyant

Hero.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → varsayılan varyant

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

Hero.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → varsayılan varyant

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

Hero.vue

Kodu kopyala

Kodu panoya kopyala

<script setup>
import { useIntlayer } from "vue-intlayer";
const { headline, cta } = useIntlayer("hero-banner");
</script>

<template>
  <section>
    <h1>{{ headline }}</h1>
    <a>{{ cta }}</a>
  </section>
</template>

Hero.svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("hero-banner");
</script>

<section>
  <h1>{$content.headline}</h1>
  <a>{$content.cta}</a>
</section>

Hero.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → varsayılan varyant

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

Hero.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → varsayılan varyant

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

hero.component.ts

Kodu kopyala

Kodu panoya kopyala

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-hero",
  template: `
    <section>
      <h1>{{ content().headline }}</h1>
      <a>{{ content().cta }}</a>
    </section>
  `,
})
export class HeroComponent {
  content = useIntlayer("hero-banner");
}

hero.js

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "vanilla-intlayer";const { headline, cta } = useIntlayer("hero-banner");document.body.innerHTML = `  <section>    <h1>${headline}</h1>    <a>${cta}</a>  </section>`;

import { useIntlayer } from "vanilla-intlayer";const { headline, cta } = useIntlayer("hero-banner");document.body.innerHTML = `  <section>    <h1>${headline}</h1>    <a>${cta}</a>  </section>`;

Adlandırılmış varyant

tsx

Kodu kopyala

Kodu panoya kopyala

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

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

Belirli dil seçeneği ile adlandırılmış varyant

tsx

Kodu kopyala

Kodu panoya kopyala

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

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

Tipik kullanım senaryoları

Bir deney anahtarı (experiment key) tarafından yönlendirilen A/B metin testleri
Dönemsel veya tanıtım afişleri
Özellik bayraklı (feature flag) mesajlaşma
Bölgeye özel pazarlama kampanyaları

Koleksiyonlar

Dinamik Kayıtlar