Gender-Based Content / Gender in Intlayer

How Gender Works

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.

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.

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:

• 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.

Doc History