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.

**/*.content.ts

Salin kode

Salin kode ke clipboard

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

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

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

"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

Salin kode

Salin kode ke clipboard

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

<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

Salin kode

Salin kode ke clipboard

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

<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

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

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

Salin kode

Salin kode ke clipboard

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");}

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

Salin kode

Salin kode ke clipboard

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

Sumber Daya Tambahan

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

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

Penumeraan

Jenis kelamin