Sebuah varian (variant) adalah sekumpulan file konten yang memiliki kunci kamus (key) yang sama tetapi masing-masing membawa nama variant yang berbeda. Intlayer menyajikan file yang sesuai berdasarkan selektor yang diteruskan ke useIntlayer.

Mendeklarasikan varian

Setiap file mewakili satu alternatif bernama. Mengabaikan variant (atau menyetelnya ke "default") menandainya sebagai fallback default.

hero-banner.content.ts

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

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;

Mengonsumsi varian

Varian default

Hero.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → varian default

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

Hero.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → varian default

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

Hero.vue

Salin kode

Salin kode ke clipboard

<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

Salin kode

Salin kode ke clipboard

<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

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → varian default

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

Hero.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → varian default

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

hero.component.ts

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

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>`;

Varian bernama

tsx

Salin kode

Salin kode ke clipboard

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

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

Varian bernama dengan lokalitas eksplisit

tsx

Salin kode

Salin kode ke clipboard

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

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

Kasus penggunaan umum

Pengujian salinan A/B yang didorong oleh kunci eksperimen
Spanduk musiman atau promosi
Pesan yang menggunakan bendera fitur (feature flags)
Kampanye pemasaran khusus wilayah

Koleksi

Rekaman dinamis