Conditional Content / Condition in Intlayer

How Condition Works

In Intlayer, conditional content is achieved through the cond function, which maps specific conditions (typically boolean values) to their corresponding content. This approach enables you to dynamically select content based on a given condition. When integrated with React Intlayer or Next Intlayer, the appropriate content is automatically chosen according to the condition provided at runtime.

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.

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.

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:

• Intlayer CLI Documentation
• React Intlayer Documentation
• Next Intlayer Documentation

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