In this short video, Nikos, Head of Engineering at Transifex showcases how you can easily localize React components using the @transifex/react library extension.
The video highlights are:
- Install needed libraries/dependencies (core Native SDK for Javascript, React extensions and the CLI tool running
npm install @transifex/native @transifex/react @transifex/cli - Import core libraries in your code file:
import { tx } from '@transifex/native';
import { T, LanguagePicker } from '@transifex/react'; - Initialize the SDK with your Native token
- Wrap all strings in code using the
<T>component - Add language picker component for easily switching languages in the app
- Use Javascript CLI tool to push source content to Transifex
- Translate strings inside Transifex
- Relaunch the app and see the newly applied translations
- Modify the source language via Editor
- CDS updates the cache every hour - To see your changes in the app earlier, invalidate the CDS cache manually running
npx txjs-cli invalidate --token=1/<...> --secret=<...>. After the successful execution of the command, you can refresh your app and see the newly updated source content.