Conteúdo Plural / Plural no Intlayer

Como o Plural Funciona

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:

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

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.

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:

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.

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

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;

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

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

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

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;

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;

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");
}

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

Marcadores personalizados

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

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;

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:

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:

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

Inválido:

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:

• Documentação de Enumeração
• Documentação de Inserção
• Documentação da CLI do Intlayer
• Documentação do React Intlayer
• Documentação do Next Intlayer

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