So I finally finished my i18next integration. It’s not a native integration, but you can basically copy and paste my code and it will work for you.
All my i18n needs are now covered within Wappler and now yours can be to.
Instead of writing 2000 words and pasting 50 screenshots(I’m looking at you @Teodor) I will upload a quick video and attach the files so you can see what is actually happening. The source code is fully commented but if you have any doubts feel free to ask.
Note: Don’t freak out if you don’t see an Italian translation. It’s on purpose.
Just unzip this guy below and pop the 3 files in a blank Wappler project and you can learn with the comments and the code.
i18ntest.zip (4.1 KB)
The whole file has less than 100 lines of code and the actual integration has less than 30 lines. The rest is code for the example web I showed in the video.
And remember that you have all the i18next documentation at your disposal. What works with vanilla i18next should work with this integration.
You just have to remember that there is only one change when you call a string to be translated.
In vanilla i18next you translate a text using this code
i18next.t('key', options)
In Wappler if you follow my integration you use a custom formatter.
{{ "key".t(options) }}
That way you can chain App Connect formatters so you could do
{{ "key".t(options).uppercase() }}
You would get the translated string for “key” in uppercase.
Enjoy.
Disclaimer: This is just a basic example. You will need to adapt, add and/or remove some things to make it work with your project. If your users can store their language preference in the database you will have to retrieve that value and pass it as an option. You may not want to default to browser language on load and make the user select. Or you may want to always present english and then give the option to change.
Last updated: