\n\n\n```\n\n \n \n\nTo utilize gender-based 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.myGender(\"male\")}

\n

{$content.myGender(\"female\")}

\n
\n```\n\n \n \n\nTo utilize gender-based 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 GenderComponent: FC = () => {\n const { myGender } = useIntlayer(\"my_key\");\n\n return (\n
\n

{myGender(\"male\")}

\n

{myGender(\"female\")}

\n
\n );\n};\n\nexport default GenderComponent;\n```\n\n \n \n\nTo utilize gender-based 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 GenderComponent: Component = () => {\n const { myGender } = useIntlayer(\"my_key\");\n\n return (\n
\n

{myGender(\"male\")}

\n

{myGender(\"female\")}

\n
\n );\n};\n\nexport default GenderComponent;\n```\n\n \n \n\nTo utilize gender-based 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-gender\",\n template: `\n
\n

{{ content().myGender(\"male\") }}

\n

{{ content().myGender(\"female\") }}

\n
\n `,\n})\nexport class GenderComponent {\n content = useIntlayer(\"my_key\");\n}\n```\n\n \n \n\nTo utilize gender-based 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(\"gender-male\")!.textContent =\n newContent.myGender(\"male\");\n document.getElementById(\"gender-female\")!.textContent =\n newContent.myGender(\"female\");\n});\n\n// Initial render\ndocument.getElementById(\"gender-male\")!.textContent = content.myGender(\"male\");\ndocument.getElementById(\"gender-female\")!.textContent =\n content.myGender(\"female\");\n```\n\n \n\n## Setting Up Gender-Based Content\n\nTo 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.\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { gender, type Dictionary } from \"intlayer\";\n\nconst myGenderContent = {\n key: \"my_key\",\n content: {\n myGender: gender({\n male: \"my content for male users\",\n female: \"my content for female users\",\n fallback: \"my content when gender is not specified\", // Optional\n }),\n },\n} satisfies Dictionary;\n\nexport default myGenderContent;\n```\n\n```json5 fileName=\"**/*.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"my_key\",\n \"content\": {\n \"myGender\": {\n \"nodeType\": \"gender\",\n \"gender\": {\n \"male\": \"my content for male users\",\n \"female\": \"my content for female users\",\n \"fallback\": \"my content when gender is not specified\", // 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 gender is not specified or does not match any defined gender.\n\n## Using Gender-Based Content with React Intlayer\n\n\n \n\nTo 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.\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"react-intlayer\";\n\nconst GenderComponent: FC = () => {\n const { myGender } = useIntlayer(\"my_key\");\n\n return (\n
\n

\n {\n /* Output: my content for male users */\n myGender(\"male\")\n }\n

\n

\n {\n /* Output: my content for female users */\n myGender(\"female\")\n }\n

\n

\n {\n /* Output: my content for male users */\n myGender(\"m\")\n }\n

\n

\n {\n /* Output: my content for female users */\n myGender(\"f\")\n }\n

\n

\n {\n /* Output: my content when gender is not specified */\n myGender(\"\")\n }\n

\n

\n {\n /* Output: my content when gender is not specified */\n myGender(undefined)\n }\n

\n
\n );\n};\n\nexport default GenderComponent;\n```\n\n \n \n\nTo utilize gender-based 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 GenderComponent: FC = () => {\n const { myGender } = useIntlayer(\"my_key\");\n\n return (\n
\n

{myGender(\"male\")}

\n

{myGender(\"female\")}

\n
\n );\n};\n\nexport default GenderComponent;\n```\n\n \n \n\nTo utilize gender-based 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 gender-based 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.myGender(\"male\")}

\n

{$content.myGender(\"female\")}

\n
\n```\n\n \n \n\nTo utilize gender-based 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 GenderComponent: FC = () => {\n const { myGender } = useIntlayer(\"my_key\");\n\n return (\n
\n

{myGender(\"male\")}

\n

{myGender(\"female\")}

\n
\n );\n};\n\nexport default GenderComponent;\n```\n\n \n \n\nTo utilize gender-based 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 GenderComponent: Component = () => {\n const { myGender } = useIntlayer(\"my_key\");\n\n return (\n
\n

{myGender(\"male\")}

\n

{myGender(\"female\")}

\n
\n );\n};\n\nexport default GenderComponent;\n```\n\n \n \n\nTo utilize gender-based 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-gender\",\n template: `\n
\n

{{ content().myGender(\"male\") }}

\n

{{ content().myGender(\"female\") }}

\n
\n `,\n})\nexport class GenderComponent {\n content = useIntlayer(\"my_key\");\n}\n```\n\n \n \n\nTo utilize gender-based 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(\"gender-male\")!.textContent =\n newContent.myGender(\"male\");\n document.getElementById(\"gender-female\")!.textContent =\n newContent.myGender(\"female\");\n});\n\n// Initial render\ndocument.getElementById(\"gender-male\")!.textContent = content.myGender(\"male\");\ndocument.getElementById(\"gender-female\")!.textContent =\n content.myGender(\"female\");\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 gender-based content in Intlayer to dynamically display content based on gender. Follow this documentation to implement gender-specific content efficiently in your project.","url":"https://intlayer.org/en-GB/doc/concept/content/gender","datePublished":"2025-07-27","dateModified":"2025-07-27","version":"5.7.2","keywords":"Gender-Based 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-07-27Last update:2025-07-27

    Gender-Based Content / Gender in Intlayer

    How Gender Works

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

    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
    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 does not 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
    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.

    ConditionInsertion