Need an example for using useLocalizedStringFormatter hook

[shripadk]

Hey all,

useMessageFormatter is deprecated in favour of useLocalizedStringFormatter. However, there isn't any example on how to use useLocalizedStringFormatter with variables specifically. From what I understand from this PR, the messages are pre-compiled at build time which returns a string function with template literal (possibly using @internationalized/string-compiler) that probably gets eval'd at some point, replacing the Record values with a function that supplies the variables to the template literal.

But I am completely clueless on how to go about triggering this during build.

Or should I keep using useMessageFormatter until this is officially released?

I really don't wish to include another Internationalization library and instead re-use the same Internationalization modules that React Aria is using under the hood.

Any guidance/help would be greatly appreciated!

[shripadk]

Have decided to use react-intl instead for the time being.

[snowystinger]

You could use ours if you wanted. Here are some example usages for different systems.

Jest: https://github.com/adobe/react-spectrum/blob/main/lib/jestResolver.js#L13
Parcel: https://github.com/adobe/react-spectrum/blob/main/packages/dev/parcel-transformer-intl/IntlTransformer.js#L14
Webpack: https://github.com/adobe/react-spectrum/pull/3600/files#diff-f6b037cc26d52d9c8a5e03ea089a467836bed11469a9ec944163eb4b1a5bb648L13

We haven't documented it yet, it's an optimization built on formatjs. Which means it shouldn't matter what Intl library you use with React Aria/Spectrum. We turn all of our strings into templates and get rid of the need for any Intl library at all. So you won't be doubling up on anything by using React-Intl.

[shripadk]

@snowystinger Thanks for confirming. Yes I came to the same conclusion after skimming through that PR. Since it is being turned into templates, it shouldn't matter if I use a separate Intl library. However, I can't use any of the build system specific stuff (like Parcel/Webpack) because I am using Remix and AFAIK it doesn't allow you to modify build config to include transformers of any kind. So compiling into templates during build time is out of question. I'll probably only use intl-messageformat from formatjs/react-intl ecosystem (which I believe is what React Aria/Spectrum used under the hood until it was replaced by custom compiler). It should solve my particular use case.

[snowystinger]

I think you could probably do it in Remix as well, just follow the examples of CSS pre-processing https://remix.run/docs/en/v1/guides/styling#tailwind-css
you're just pre-processing strings instead of css

[shripadk]

@snowystinger Thanks. Makes sense. Will give it a shot!