\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## Setting Up Conditional Content\n\nTo set up conditional content in your Intlayer project, create a content module that includes your conditional definitions. Below are examples in various 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: \"my content when it's true\",\n false: \"my content when it's false\",\n fallback: \"my content when the condition fails\", // Optional\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\": \"my content when it's true\",\n \"false\": \"my content when it's false\",\n \"fallback\": \"my content when the condition fails\", // Optional\n },\n },\n },\n}\n```\n\n> If no fallback is declared, the last key declared will be taken as a fallback if the condition is not validated.\n\n## Using Conditional Content with 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## Additional Resources\n\nFor more detailed information on configuration and usage, refer to the following resources:\n\n- [Intlayer CLI Documentation](/en-GB/doc/concept/cli)\n- [React Intlayer Documentation](/en-GB/doc/environment/create-react-app)\n- [Next Intlayer Documentation](/en-GB/doc/environment/nextjs/15)\n\nThese resources offer further insights into the setup and usage of Intlayer across various environments and frameworks.\n","description":"Learn how to use conditional content in Intlayer to dynamically display content based on specific conditions. Follow this documentation to implement conditions efficiently in your project.","url":"https://intlayer.org/en-GB/doc/concept/content/condition","datePublished":"2025-02-07","dateModified":"2025-06-29","version":"5.5.10","keywords":"Conditional Content, Dynamic Rendering, Documentation, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Developers, Content Managers"}}
    Author:
    Creation:2025-02-07Last update:2025-06-29

    Conditional Content / Condition in Intlayer

    How Condition Works

    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;

    Setting Up Conditional Content

    To set up conditional content in your Intlayer project, create a content module that includes your conditional definitions. Below are examples in various formats.

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "my content when it's true",
      false: "my content when it's false",
      fallback: "my content when the condition fails", // Optional
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;
    If no fallback is declared, the last key declared will be taken as a fallback if the condition is not validated.

    Using Conditional Content with 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;

    Additional Resources

    For more detailed information on configuration and usage, refer to the following resources:

    These resources offer further insights into the setup and usage of Intlayer across various environments and frameworks.

    EnumerationGender