\n\n\n```\n\n \n \n\nTo utilize conditional content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

{$content.myCondition(true)}

\n

{$content.myCondition(false)}

\n

\n```\n\n \n \n\nTo utilize conditional content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst ConditionalComponent: FC = () => {\n const { myCondition } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myCondition(true)}

\n

{myCondition(false)}

\n

\n );\n};\n\nexport default ConditionalComponent;\n```\n\n \n \n\nTo utilize conditional content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst ConditionalComponent: Component = () => {\n const { myCondition } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myCondition(true)}

\n

{myCondition(false)}

\n

\n );\n};\n\nexport default ConditionalComponent;\n```\n\n \n \n\nTo utilize conditional content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-conditional\",\n template: `\n

\n

{{ content().myCondition(true) }}

\n

{{ content().myCondition(false) }}

\n

\n `,\n})\nexport class ConditionalComponent {\n content = useIntlayer(\"my_key\");\n}\n```\n\n \n \n\nTo utilize conditional content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"my_key\").onChange((newContent) => {\n document.getElementById(\"true-content\")!.textContent =\n newContent.myCondition(true);\n document.getElementById(\"false-content\")!.textContent =\n newContent.myCondition(false);\n});\n\n// Initial render\ndocument.getElementById(\"true-content\")!.textContent =\n content.myCondition(true);\ndocument.getElementById(\"false-content\")!.textContent =\n content.myCondition(false);\n```\n\n \n\n## Configuration du Contenu Conditionnel\n\nPour configurer le contenu conditionnel dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions conditionnelles. Voici des exemples dans différents formats.\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { cond, type Dictionary } from \"intlayer\";\n\nconst myConditionalContent = {\n key: \"my_key\",\n content: {\n myCondition: cond({\n true: \"mon contenu lorsque c'est vrai\",\n false: \"mon contenu lorsque c'est faux\",\n fallback: \"mon contenu lorsque la condition échoue\", // Optionnel\n }),\n },\n} satisfies Dictionary;\n\nexport default myConditionalContent;\n```\n\n```json5 fileName=\"**/*.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"my_key\",\n \"content\": {\n \"myCondition\": {\n \"nodeType\": \"condition\",\n \"condition\": {\n \"true\": \"mon contenu lorsque c'est vrai\",\n \"false\": \"mon contenu lorsque c'est faux\",\n \"fallback\": \"mon contenu lorsque la condition échoue\", // Optionnel\n },\n },\n },\n}\n```\n\n> Si aucun fallback n'est déclaré, la dernière clé déclarée sera prise comme fallback si la condition n'est pas validée.\n\n## Utilisation du Contenu Conditionnel avec React Intlayer\n\n\n \n\nTo 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.\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"react-intlayer\";\n\nconst ConditionalComponent: FC = () => {\n const { myCondition } = useIntlayer(\"my_key\");\n\n return (\n

\n

\n {\n /* Output: my content when it's true */\n myCondition(true)\n }\n

\n

\n {\n /* Output: my content when it's false */\n myCondition(false)\n }\n

\n

\n {\n /* Output: my content when the condition fails */\n myCondition(\"\")\n }\n

\n

\n {\n /* Output: my content when the condition fails */\n myCondition(undefined)\n }\n

\n

\n );\n};\n\nexport default ConditionalComponent;\n```\n\n \n \n\nTo utilize conditional content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\n\"use client\";\n\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"next-intlayer\";\n\nconst ConditionalComponent: FC = () => {\n const { myCondition } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myCondition(true)}

\n

{myCondition(false)}

\n

\n );\n};\n\nexport default ConditionalComponent;\n```\n\n \n \n\nTo utilize conditional content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```vue fileName=\"**/*.vue\"\n\n\n\n```\n\n \n \n\nTo utilize conditional content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

{$content.myCondition(true)}

\n

{$content.myCondition(false)}

\n

\n```\n\n \n \n\nTo utilize conditional content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst ConditionalComponent: FC = () => {\n const { myCondition } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myCondition(true)}

\n

{myCondition(false)}

\n

\n );\n};\n\nexport default ConditionalComponent;\n```\n\n \n \n\nTo utilize conditional content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst ConditionalComponent: Component = () => {\n const { myCondition } = useIntlayer(\"my_key\");\n\n return (\n

\n

{myCondition(true)}

\n

{myCondition(false)}

\n

\n );\n};\n\nexport default ConditionalComponent;\n```\n\n \n \n\nTo utilize conditional content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-conditional\",\n template: `\n

\n

{{ content().myCondition(true) }}

\n

{{ content().myCondition(false) }}

\n

\n `,\n})\nexport class ConditionalComponent {\n content = useIntlayer(\"my_key\");\n}\n```\n\n \n \n\nTo utilize conditional content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"my_key\").onChange((newContent) => {\n document.getElementById(\"true-content\")!.textContent =\n newContent.myCondition(true);\n document.getElementById(\"false-content\")!.textContent =\n newContent.myCondition(false);\n});\n\n// Initial render\ndocument.getElementById(\"true-content\")!.textContent =\n content.myCondition(true);\ndocument.getElementById(\"false-content\")!.textContent =\n content.myCondition(false);\n```\n\n \n\n\n## Ressources Supplémentaires\n\nPour plus d'informations détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :\n\n- [Documentation CLI Intlayer](/fr/doc/concept/cli)\n- [Documentation React Intlayer](/fr/doc/environment/create-react-app)\n- [Documentation Next Intlayer](/fr/doc/environment/nextjs/15)\n\nCes ressources offrent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.\n","description":"Découvrez comment utiliser le contenu conditionnel dans Intlayer pour afficher dynamiquement du contenu en fonction de conditions spécifiques. Suivez cette documentation pour implémenter efficacement les conditions dans votre projet.","url":"https://intlayer.org/fr/doc/concept/content/condition","datePublished":"2025-02-07","dateModified":"2025-06-29","keywords":"Contenu conditionnel, Rendu dynamique, Documentation, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}

Auteur:

Création:2025-02-07Dernière mise à jour:2025-06-29

Référencez cette doc à votre assistant AI préféréChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

Modifier cette documentation

Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.

Lien GitHub de la documentation

Copier

Copier le Markdown du doc dans le presse-papiers

Contenu Conditionnel / Condition dans Intlayer

Comment Fonctionne la Condition

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

"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

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Configuration du Contenu Conditionnel

Pour configurer le contenu conditionnel dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions conditionnelles. Voici des exemples dans différents formats.

**/*.content.ts

Copier le code

Copier le code dans le presse-papiers

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "mon contenu lorsque c'est vrai",
      false: "mon contenu lorsque c'est faux",
      fallback: "mon contenu lorsque la condition échoue", // Optionnel
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Si aucun fallback n'est déclaré, la dernière clé déclarée sera prise comme fallback si la condition n'est pas validée.

Utilisation du Contenu Conditionnel avec 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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

"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

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

<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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Ressources Supplémentaires

Pour plus d'informations détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :

Ces ressources offrent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.

Énumération Genre