Konten Kondisional / Kondisi di Intlayer

Cara Kerja Kondisi

Di Intlayer, konten kondisional dicapai melalui fungsi cond, yang memetakan kondisi spesifik (biasanya nilai boolean) ke konten yang sesuai. Pendekatan ini memungkinkan Anda untuk memilih konten secara dinamis berdasarkan kondisi yang diberikan. Ketika diintegrasikan dengan React Intlayer atau Next Intlayer, konten yang tepat secara otomatis dipilih sesuai dengan kondisi yang diberikan saat runtime.

Menyiapkan Konten Kondisional

Untuk menyiapkan konten kondisional dalam proyek Intlayer Anda, buat modul konten yang mencakup definisi kondisional Anda. Berikut adalah contoh dalam berbagai format.

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "konten saya ketika kondisinya benar",
      false: "konten saya ketika kondisinya salah",
      fallback: "konten saya ketika kondisi gagal", // Opsional
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Jika tidak ada fallback yang dideklarasikan, kunci terakhir yang dideklarasikan akan diambil sebagai fallback jika kondisi tidak terpenuhi.

Menggunakan Konten Kondisional dengan React Intlayer

Untuk memanfaatkan konten kondisional dalam sebuah komponen React, impor dan gunakan hook useIntlayer dari paket react-intlayer. Hook ini mengambil konten untuk kunci yang ditentukan dan memungkinkan Anda untuk melewatkan kondisi untuk memilih output yang sesuai.

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

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

  return (
    <div>
      <p>
        {
          /* Output: konten saya ketika kondisinya benar */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Output: konten saya ketika kondisinya salah */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Output: konten saya ketika kondisi gagal */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Output: konten saya ketika kondisi gagal */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

Sumber Daya Tambahan

Untuk informasi lebih rinci tentang konfigurasi dan penggunaan, lihat sumber daya berikut:

• Dokumentasi Intlayer CLI
• Dokumentasi React Intlayer
• Dokumentasi Next Intlayer

Sumber daya ini menawarkan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer di berbagai lingkungan dan framework.