Pluralization question

[vabyars]

Hello! I'm looking for migrate i18n in my project to intlayer. I have a question about pluralization. I want to do something like i18n-react for inserting count in final string:

{
  "key_ordinal_one": "{{count}}st place", // 1st, 21st, 31st
  "key_ordinal_two": "{{count}}nd place", // 2nd, 22nd, 32nd
  "key_ordinal_few": "{{count}}rd place", // 3rd, 23rd, 33rd
  "key_ordinal_other": "{{count}}th place" // 4th, 5th, 24th, 11th
}

I saw the function enu, where key should be EnterFormat. But there are two issues:

1. I couldn't find a way to insert a number into the final string using enu function
2. Pluralization differs in other languages. And its logic does not fit into intervals. For example, in Russian, order nuber is used. I did't find something like that

So, is it possible to solve this case in intlayer? Or maybe it will be in future versions?

[aymericzip]

Hey @vabyars

Thanks for reporting that.
You're right, enu does not support ordinals, I will thing how to implement it

I suggest to use Intl global class as a quick solution by waiting a solution from the intlayer side

const dictionary = {
  key_ordinal_one: "{{count}}st place",
  key_ordinal_two: "{{count}}nd place",
  key_ordinal_few: "{{count}}rd place",
  key_ordinal_other: "{{count}}th place"
};

const getOrdinalMessage = (count, locale) => {
  // Initialize PluralRules with type: 'ordinal'
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });
  
  // Get the category ('one', 'two', 'few', 'other')
  const category = rules.select(count);
  
  // Map the category to your specific keys
  const key = `key_ordinal_${category}`;
  
  // Retrieve and parse the string (simple replacement)
  const template = dictionary[key];
  
  // Fallback if the key doesn't exist (safety check)
  if (!template) return dictionary['key_ordinal_other'].replace('{{count}}', count);

  return template.replace('{{count}}', count);
};

console.log(getOrdinalMessage(1));   // "1st place" (matches 'one')
console.log(getOrdinalMessage(2));   // "2nd place" (matches 'two')
console.log(getOrdinalMessage(3));   // "3rd place" (matches 'few')
console.log(getOrdinalMessage(4));   // "4th place" (matches 'other')
console.log(getOrdinalMessage(11));  // "11th place" (Correctly matches 'other', not 'one')
console.log(getOrdinalMessage(21));  // "21st place" (Correctly matches 'one')

[aymericzip]

Hey @vabyars

Here is another solution:

import { enu, insert, type Dictionary } from 'intlayer';

const content = {
  key: 'ranking_component',
  content: {
    ordinal: enu({
      1: insert('{{count}}st place'),
      2: insert('{{count}}nd place'),
      3: insert('{{count}}rd place'),
      'fallback': insert('{{count}}th place'),
    }),
  },
} satisfies Dictionary;

export default content;

const { ordinal } = useIntlayer('ranking_component');

const value = 5
const lastDigit = Math.abs(count) % 10

return <>{ordinal(lastDigit)({ count })}</>

[vabyars]

So, It looks good enough. I think, if wrap this logic in custom hook in my project it shood be ok!
Thanks for answer!