Use proper i18n solution

[raae]

Not so much because I think we will translate the app at the moment, but to have one place to look for typos etc.

• Select framework
• Pull all text from code and into the framework

Here is some info on the Gatsby site: https://www.gatsbyjs.com/docs/localization-i18n/.

[raae]

I am wondering if we should just start with a dictionary of the texts, as these solutions are very advanced.

[olavea]

@raae
What do you mean by "a dictionary of the texts"

One file with all the text inside it?

[daisygabi]

Hi, I hope it's ok to barge in the conversation here. I want to share my experience with internationalization and just explain a bit how to work with react-i18n. It was easy to integrate it and I don't regret using it.

I have this template project where you can find it configured: https://tinyurl.com/yy2usy8a

• First, you need to configure i18n options (see https://github.com/daisygabi/reactjstailwindcsstemplate/tree/master/src/config) and specify what languages you want to support. In my case, I have Romanian, French and English.
• Next, you need the actual locale folder where you keep your key-value for each language (example: https://github.com/daisygabi/reactjstailwindcsstemplate/blob/master/src/locales/en/en.json)
• And to glue it all together you need to wrap the main entry of the app (https://github.com/daisygabi/reactjstailwindcsstemplate/blob/master/src/index.js) in the i18n provider.

Example Usage: in a component where you want to use translations:
export default withTranslation("translations")(ParticipantFromInvitation); - I used classes mostly so far
And where you want to have a string that is translatable:
import {Trans} from "react-i18next";
....
label=<Trans i18nKey="first_name"/>

Forgot to mention: the language code has to be appended in the URL.

I hope this helps.
Love the product!

[raae]

Thank you, this just made my day that you chime in like that @daisygabi :D