In Intlayer, gender-based content is achieved through the gender function, which maps specific gender values ('male', 'female') to their corresponding content. This approach enables you to dynamically select content based on a given gender. When integrated with React Intlayer or Next Intlayer, the appropriate content is automatically chosen according to the gender provided at runtime.

Setting Up Gender-Based Content

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

**/*.content.ts

Copy code

Copy the code to the clipboard

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "my content for male users",
      female: "my content for female users",
      fallback: "my content when gender is not specified", // Optional
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

If no fallback is declared, the last key declared will be taken as a fallback if the gender is not specified or doesn't match any defined gender.

Using Gender-Based Content with React Intlayer

To utilize gender-based 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 gender to select the appropriate output.

**/*.tsx

Copy code

Copy the code to the clipboard

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const GenderComponent: FC = () => {
  const { myGender } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Output: my content for male users */
          myGender("male")
        }
      </p>
      <p>
        {
          /* Output: my content for female users */
          myGender("female")
        }
      </p>
      <p>
        {
          /* Output: my content for male users */
          myGender("m")
        }
      </p>
      <p>
        {
          /* Output: my content for female users */
          myGender("f")
        }
      </p>
      <p>
        {
          /* Output: my content when gender is not specified */
          myGender("")
        }
      </p>
      <p>
        {
          /* Output: my content when gender is not specified */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

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.

Condition

Insertion

Creation:2025-07-27Last update:2025-07-27

Reference this doc to your favorite AI assistant

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Ask your question and get a summary of the document by referencing this page and the AI provider of your choice

Version History

"Introduce gender based content"
v5.7.27/27/2025

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Gender-Based Content / Gender in Intlayer

How Gender Works

Setting Up Gender-Based Content

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

**/*.content.ts

Copy code

Copy the code to the clipboard

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "my content for male users",
      female: "my content for female users",
      fallback: "my content when gender is not specified", // Optional
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

If no fallback is declared, the last key declared will be taken as a fallback if the gender is not specified or doesn't match any defined gender.

Using Gender-Based Content with React Intlayer

**/*.tsx

Copy code

Copy the code to the clipboard

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const GenderComponent: FC = () => {
  const { myGender } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Output: my content for male users */
          myGender("male")
        }
      </p>
      <p>
        {
          /* Output: my content for female users */
          myGender("female")
        }
      </p>
      <p>
        {
          /* Output: my content for male users */
          myGender("m")
        }
      </p>
      <p>
        {
          /* Output: my content for female users */
          myGender("f")
        }
      </p>
      <p>
        {
          /* Output: my content when gender is not specified */
          myGender("")
        }
      </p>
      <p>
        {
          /* Output: my content when gender is not specified */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

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.

Condition

Insertion