best way to internationalize numbers?
Unanswered
Gg posted this in #help-forum
GgOP
whats the best way to internationalize numbers? im getting
when just using
i know if i would do it in a useEffect, it would solve it, but that becomes ugly quickly
Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "2,244" Client: "2 244"when just using
const numberFormatter = (value: number) => Intl.NumberFormat("us").format(value).toString();i know if i would do it in a useEffect, it would solve it, but that becomes ugly quickly
6 Replies
GgOP
found this hook that next-intl provides, but im not really interested in adding full internationalization to my app
https://next-intl-docs.vercel.app/docs/usage/numbers
https://next-intl-docs.vercel.app/docs/usage/numbers
@Gg whats the best way to internationalize numbers? im getting
js
Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "2,244" Client: "2 244"
when just using
js
const numberFormatter = (value: number) => Intl.NumberFormat("us").format(value).toString();
i know if i would do it in a useEffect, it would solve it, but that becomes ugly quickly
[add
but depending on the target user base, target languages, you might just need to use a single system for all countries (i.e. display, say, 2,244 everywhere)
suppressHydrationWarning to the elements displaying this number](https://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors), if you want to localise the number (i.e. display 2,244 or 2.244 or 2 244 depending on the user's country).but depending on the target user base, target languages, you might just need to use a single system for all countries (i.e. display, say, 2,244 everywhere)
GgOP
@joulev thank you, its an admin panel so might as well use a single system
woops didnt meant to ping
🤦â€â™‚ï¸
No problems, feel free to ping if you have questions