Author:
    Aymeric PINEAU
    Creation:2025-02-07Last update:2026-09-27

    Conditional Content / Condition in Intlayer

    рд╢рд░реНрдд рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддреА рд╣реИ

    Intlayer рдореЗрдВ, рд╕рд╢рд░реНрдд рд╕рд╛рдордЧреНрд░реА cond рдлрд╝рдВрдХреНрд╢рди рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХреА рдЬрд╛рддреА рд╣реИ, рдЬреЛ рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╢рд░реНрддреЛрдВ (рдЖрдорддреМрд░ рдкрд░ рдмреВрд▓рд┐рдпрди рдорд╛рди) рдХреЛ рдЙрдирдХреА рд╕рдВрдмрдВрдзрд┐рдд рд╕рд╛рдордЧреНрд░реА рд╕реЗ рдореИрдк рдХрд░рддрд╛ рд╣реИред рдпрд╣ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдЖрдкрдХреЛ рджреА рдЧрдИ рд╢рд░реНрдд рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рд╕рд╛рдордЧреНрд░реА рдХреЛ рдЧрддрд┐рд╢реАрд▓ рд░реВрдк рд╕реЗ рдЪреБрдирдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдмрдирд╛рддрд╛ рд╣реИред рдЬрдм React Intlayer рдпрд╛ Next Intlayer рдХреЗ рд╕рд╛рде рдПрдХреАрдХреГрдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рддреЛ рд░рдирдЯрд╛рдЗрдо рдкрд░ рдкреНрд░рджрд╛рди рдХреА рдЧрдИ рд╢рд░реНрдд рдХреЗ рдЕрдиреБрд╕рд╛рд░ рдЙрдкрдпреБрдХреНрдд рд╕рд╛рдордЧреНрд░реА рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдЪреБрдиреА рдЬрд╛рддреА рд╣реИред

    рд╕рд╢рд░реНрдд рд╕рд╛рдордЧреНрд░реА рд╕реЗрдЯ рдХрд░рдирд╛

    рдЕрдкрдиреЗ Intlayer рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ рд╕рд╢рд░реНрдд рд╕рд╛рдордЧреНрд░реА рд╕реЗрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдПрдХ рд╕рд╛рдордЧреНрд░реА рдореЙрдбреНрдпреВрд▓ рдмрдирд╛рдПрдВ рдЬрд┐рд╕рдореЗрдВ рдЖрдкрдХреА рд╕рд╢рд░реНрдд рдкрд░рд┐рднрд╛рд╖рд╛рдПрдБ рд╢рд╛рдорд┐рд▓ рд╣реЛрдВред рдиреАрдЪреЗ рд╡рд┐рднрд┐рдиреНрди рдкреНрд░рд╛рд░реВрдкреЛрдВ рдореЗрдВ рдЙрджрд╛рд╣рд░рдг рджрд┐рдП рдЧрдП рд╣реИрдВред

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "рдореЗрд░реА рд╕рд╛рдордЧреНрд░реА рдЬрдм рдпрд╣ рд╕рддреНрдп рд╣реИ",
      false: "рдореЗрд░реА рд╕рд╛рдордЧреНрд░реА рдЬрдм рдпрд╣ рдЕрд╕рддреНрдп рд╣реИ",
      fallback: "рдореЗрд░реА рд╕рд╛рдордЧреНрд░реА рдЬрдм рд╢рд░реНрдд рд╡рд┐рдлрд▓ рд╣реЛрддреА рд╣реИ", // рд╡реИрдХрд▓реНрдкрд┐рдХ
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;
    рдпрджрд┐ рдХреЛрдИ рдлреЙрд▓рдмреИрдХ рдШреЛрд╖рд┐рдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ, рддреЛ рдпрджрд┐ рд╢рд░реНрдд рдорд╛рдиреНрдп рдирд╣реАрдВ рд╣реИ, рддреЛ рдЕрдВрддрд┐рдо рдШреЛрд╖рд┐рдд рдХреБрдВрдЬреА рдХреЛ рдлреЙрд▓рдмреИрдХ рдХреЗ рд░реВрдк рдореЗрдВ рд▓рд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред

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

    рдЕрддрд┐рд░рд┐рдХреНрдд рд╕рдВрд╕рд╛рдзрди

    рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдФрд░ рдЙрдкрдпреЛрдЧ рдкрд░ рдЕрдзрд┐рдХ рд╡рд┐рд╕реНрддреГрдд рдЬрд╛рдирдХрд╛рд░реА рдХреЗ рд▓рд┐рдП, рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рд╕рдВрд╕рд╛рдзрдиреЛрдВ рдХрд╛ рд╕рдВрджрд░реНрдн рд▓реЗрдВ:

    Intlayer CLI рджрд╕реНрддрд╛рд╡реЗрдЬрд╝
    React Intlayer рджрд╕реНрддрд╛рд╡реЗрдЬрд╝
    Next Intlayer рджрд╕реНрддрд╛рд╡реЗрдЬрд╝

    рдпреЗ рд╕рдВрд╕рд╛рдзрди рд╡рд┐рднрд┐рдиреНрди рд╡рд╛рддрд╛рд╡рд░рдгреЛрдВ рдФрд░ рдлреНрд░реЗрдорд╡рд░реНрдХреНрд╕ рдореЗрдВ Intlayer рдХреА рд╕реЗрдЯрдЕрдк рдФрд░ рдЙрдкрдпреЛрдЧ рдкрд░ рдФрд░ рдЕрдзрд┐рдХ рдЬрд╛рдирдХрд╛рд░реА рдкреНрд░рджрд╛рди рдХрд░рддреЗ рд╣реИрдВред

    рдЧрдгрдирд╛рд▓рд┐рдВрдЧ