Autor:
    Aymeric PINEAU
    Data utworzenia:2025-02-07Ostatnia aktualizacja:2026-10-08

    Zawartość warunkowa / Warunek w Intlayer

    Jak działa warunek

    W Intlayer zawartość warunkowa jest realizowana za pomocą funkcji cond, która mapuje określone warunki (zazwyczaj wartości logiczne boolean) na odpowiadającą im treść. To podejście pozwala dynamicznie wybierać treść na podstawie podanego warunku. Po integracji z React Intlayer, Next Intlayer lub innymi adapterami, odpowiednia treść jest automatycznie wybierana zgodnie z warunkiem przekazanym w czasie wykonywania.

    Konfiguracja zawartości warunkowej

    Aby skonfigurować zawartość warunkową w swoim projekcie Intlayer, utwórz moduł deklaracji treści zawierający definicje warunkowe. Poniżej znajdują się przykłady w różnych formatach.

    **/*.content.ts
    import { cond, type Dictionary } from "intlayer";

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "moja treść, gdy prawda",
      false: "moja treść, gdy fałsz",
      fallback: "treść domyślna (fallback)", // Opcjonalne
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;
    Jeśli nie zostanie zadeklarowana wartość domyślna (fallback), ostatni zadeklarowany klucz zostanie użyty jako fallback, gdy żaden warunek nie pasuje.

    Używanie zawartości warunkowej

    Aby użyć treści warunkowej w komponencie React, zaimportuj i użyj hooka useIntlayer z pakietu react-intlayer. Hook ten pobiera treść dla wskazanego klucza i pozwala przekazać warunek logiczny, aby wybrać odpowiedni wynik.

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

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

  return (
    <div>
      <p>
        {
          /* Wynik: moja treść, gdy prawda */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Wynik: moja treść, gdy fałsz */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Wynik: treść domyślna (fallback) */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Wynik: treść domyślna (fallback) */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

    Aby użyć treści warunkowej w komponentach klienckich Next.js (Client Components), pobierz ją za pomocą hooka useIntlayer. Oto przykład:

    **/*.tsx
    "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;

    Aby użyć treści warunkowej w komponentach Vue, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

    **/*.vue
    <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>

    Aby użyć treści warunkowej w komponentach Svelte, pobierz ją za pomocą hooka useIntlayer. Dostęp do magazynu (store) uzyskujemy przez $. Oto przykład:

    **/*.svelte
    <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>

    Aby użyć treści warunkowej w komponentach Preact, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

    **/*.tsx
    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;

    Aby użyć treści warunkowej w komponentach SolidJS, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

    **/*.tsx
    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;

    Aby użyć treści warunkowej w komponentach Angular, pobierz ją za pomocą funkcji useIntlayer. Oto przykład:

    app.component.ts
    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");
}

    Aby użyć treści warunkowej w czystym JavaScript (vanilla-intlayer), pobierz ją za pomocą funkcji useIntlayer. Oto przykład:

    **/*.ts
    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);
});

// Pierwsze renderowanie
document.getElementById("true-content")!.textContent =
  content.myCondition(true);
document.getElementById("false-content")!.textContent =
  content.myCondition(false);

    Dodatkowe zasoby

    Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

    Dokumentacja Intlayer CLI
    Dokumentacja React Intlayer
    Dokumentacja Next Intlayer

    Te zasoby oferują dodatkowe informacje na temat konfiguracji i użytkowania Intlayer w różnych środowiskach i frameworkach.

    WyliczeniePłeć