Autor:

Criação:2026-05-04Última atualização:2026-05-04

Referência esta documentação ao seu assistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Histórico de versões

"Init history"
v8.8.004/05/2026

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Editar esta documentação

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Copiar

Copiar o Markdown do documento para a área de transferência

Conteúdo Plural / Plural no Intlayer

Name: Intlayer
Author: Intlayer

Como o Plural Funciona

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

"use client";

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Vue components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.vue

Copiar código

Copiar o código para a área de transferência

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

To use plural content in Svelte components, retrieve it via the useIntlayer hook and call it with a count. The store is accessed with $. Here's an example:

**/*.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

To use plural content in Preact components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in SolidJS components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

app.component.ts

Copiar código

Copiar o código para a área de transferência

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

To use plural content with vanilla-intlayer, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.ts

Copiar código

Copiar o código para a área de transferência

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

Quando usar `plural` vs `enu`

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

"use client";

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Vue components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.vue

Copiar código

Copiar o código para a área de transferência

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

To use plural content in Svelte components, retrieve it via the useIntlayer hook and call it with a count. The store is accessed with $. Here's an example:

**/*.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

To use plural content in Preact components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in SolidJS components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar o código para a área de transferência

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

app.component.ts

Copiar código

Copiar o código para a área de transferência

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

To use plural content with vanilla-intlayer, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.ts

Copiar código

Copiar o código para a área de transferência

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

Configurando Conteúdo Plural

Para configurar o conteúdo plural no seu projeto Intlayer, crie um módulo de conteúdo que use o auxiliar plural. A categoria other é obrigatória e é usada como fallback quando uma localidade não define uma categoria mais específica.

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      pt: plural({
        one: "{{count}} vaga",
        other: "{{count}} vagas",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

As categorias suportadas são zero, one, two, few, many, other. Você só precisa declarar as categorias que seu idioma de destino usa, o Intlayer volta para other quando nenhuma categoria específica corresponde.

O marcador {{count}} é substituído automaticamente pela contagem que você passa em tempo de execução. Você também pode incluir outros marcadores (veja Marcadores personalizados abaixo).

Usando Conteúdo Plural com React Intlayer

Para usar conteúdo plural dentro de um componente React, recupere-o através do hook useIntlayer e chame-o com uma contagem. A localidade ativa e a contagem são combinadas para escolher a categoria CLDR correspondente.

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* Em inglês:                                  */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

Você pode chamar a função retornada de duas maneiras equivalentes:

tsx

Copiar código

Copiar o código para a área de transferência

totalOpenings(21); // atalho: apenas contagemtotalOpenings({ count: 21 }); // forma explícita

Marcadores personalizados

Strings plurais podem incluir marcadores diferentes de {{count}}. Passe-os na forma de objeto junto com count:

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

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

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, você tem {{count}} nova mensagem",
      other: "{{name}}, você tem {{count}} novas mensagens",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

**/*.tsx

Copiar código

Copiar o código para a área de transferência

const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice, você tem 1 nova mensagem"

summary({ count: 7, name: "Alice" });
// → "Alice, você tem 7 novas mensagens"

Categorias CLDR em um relance

Diferentes idiomas usam diferentes subconjuntos das categorias CLDR. Alguns casos comuns:

Mostrar todo o conteúdo da tabela

Abrir a tabela em um modal para ver todo o conteúdo claramente

Idioma	Categorias usadas
Inglês (`en`)	`one`, `other`
Francês (`fr`)	`one`, `many`, `other`
Russo (`ru`)	`one`, `few`, `many`, `other`
Polonês (`pl`)	`one`, `few`, `many`, `other`
Árabe (`ar`)	`zero`, `one`, `two`, `few`, `many`, `other`
Japonês / Chinês	apenas `other`

Você não precisa memorizar isso, declare as categorias para as quais você tem traduções, e o Intlayer voltará para other quando necessário.

Limitação

Em comparação com outros nós, o plural ainda não pode ser aninhado com nós filhos.

Exemplo:

Válido:

Copiar código

Copiar o código para a área de transferência

    totalOpenings: t({      en: plural({        one: "{{count}} opening",        other: "{{count}} openings",      }),      fr: plural({        one: "{{count}} offre",        other: "{{count}} offres",      }),    }),

Inválido:

Copiar código

Copiar o código para a área de transferência

totalOpenings: plural({  one: t({    en: "{{count}} opening",    fr: "{{count}} offre",  }),  other: t({    en: "{{count}} openings",    fr: "{{count}} offres",  }),}),

Recursos Adicionais

Para informações mais detalhadas sobre configuração e uso, consulte os seguintes recursos:

Estes recursos oferecem mais insights sobre a configuração e o uso do Intlayer em vários ambientes e frameworks.

Tradução Enumeração

Histórico de versões

Conteúdo Plural / Plural no Intlayer

Como o Plural Funciona

Quando usar plural vs enu

Configurando Conteúdo Plural

Usando Conteúdo Plural com React Intlayer

Marcadores personalizados

Categorias CLDR em um relance

Limitação

Recursos Adicionais

Quando usar `plural` vs `enu`