You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Translation file is plain object, which values are strings or functions returning strings or even JSX markup.
Then we create React Context for locale LocaleContext = React.createContext() and new hook named useTranslate. It loads translations file on every context change and returns translation function to a component.
As ES6 template tag it extracts key and arguments from passed template, and also returns raw ES6 template value as fallback if key is not found in translations object.
As regular function it uses first argument for key lookup and passes rest arguments to translation template.
Benefits:
We can localize each component independently.
Or we can create common resources and utilities and import them in each component translations file.
Or we can group translations in other ways.
Implementation can be found here: gist (about 100 SLOC).
If this is interesting, I can submit a PR.
The text was updated successfully, but these errors were encountered:
An idea for lazy component localization with code splitting.
Suppose we want to localize component named
UserProfile
At first we should define dynamically imported translations file per language:
Translation file is plain object, which values are strings or functions returning strings or even JSX markup.
Then we create React Context for locale
LocaleContext = React.createContext()
and new hook nameduseTranslate
. It loads translations file on every context change and returns translation function to a component.Translation function can work in two modes:
Benefits:
Implementation can be found here: gist (about 100 SLOC).
If this is interesting, I can submit a PR.
The text was updated successfully, but these errors were encountered: