Pluralization with JSX Components: Security and Best Practices

[nosovandriy]

Hi everyone!
I’m using next-intl with t.rich() for pluralization and dynamically rendering numbers through a JSX component (e.g., an animated counter ).

Example translation in en.json:
{ "profiles": "{count, plural, =0 {Show 0 profiles} =1 {Show one profile} other {Show <counter></counter> profiles}}" }

Usage in code:
t.rich('profiles', { count: totalCount, counter: () => <AnimatedCounter value={totalCount} /> })

Questions:
Is this approach considered safe regarding XSS vulnerabilities?
Are there better syntax or patterns for this use case?

I would appreciate any advice and code examples.

[amannn]

Yes, that looks good to me!

Is this approach considered safe regarding XSS vulnerabilities?

Yep, the parser breaks the string into separate tokens and in case of rich tags formats them into an Array<ReactNode> (ref). Anything that's returned from a React component can be considered XSS-safe as long as you're not using dangerouslySetInnerHTML (which you're not if you use t.rich).

Are there better syntax or patterns for this use case?

It looks reasonable to me! Using a plural is useful here so you can adapt to languages with different plural rules.

The only thing that caught my eye is if from a UX perspective you want to render "Show 0 profiles" (also not sure what would happen if you click on that).

[nosovandriy]

Thanks a lot