Create custom i18n provider with effector and typescript
Today I will show you how to create your own i18n solution with effector, typescript and react.
First of all, we should design the state of our provider, consisting of two parts:
- current language
Ok, let's do it. Create a file store.ts and write the following code:
Ok, we created the state for our i18n library. This state will store information about the current language and a set of translations. Now we should provide the language switching at runtime and dynamically adding the sets of the translates.
I created two events in the file events.ts:
There after we should subscribe our stores to this events
Now we can switch the language in our application with the event call:
Now, when the basis of our app is almost finished, let's create React-Component, that allow us to use translations. We'll create the "translate.tsx" file.
As you can see, creating such a thing didn't take long. The benefits is that now we can subscribe to our localisation store and change translations even where it couldn't be done in the usual way. For example, we can create a helper class that allow us easy to interact with localisation in the app:
Then we can define the translate function and call it from anywhere in our code.
Here's example of using:
And at the end i will show some simple, but very useful components