Skip to main content

Strings

Now you need to create the files where the translations will be stored. Therefore create in the src directory the l10n folder and add the translation files. In this tutorial we'll use the same translation files used in the Typescript section.

For the sake of clarity here's the files:

src/l10n/us.json
{  "welcome": "Welcome on the Text Localizer Docs",  "help": "Do you need some help about {{ topic }}?",  "question": "Which is your favorite cat?"}
src/l10n/gb.ts
import us from './us.json';
export default {  ...us,  question: 'Which is your favourite cat?',};
src/l10n/it.ts
const fetchItTranslations = async () => ({  welcome: 'Benvenuto sulla documentazione di Text Localizer',  help: 'Hai bisogno di aiuto riguardo {{ topic }}?',  question: 'Qual รจ il tuo gatto preferito?',});

Folder Structure#

The project will have the following folder structure:

.โ”œโ”€โ”€ ...โ”œโ”€โ”€ _srcโ”‚   โ”œโ”€โ”€ _l10nโ”‚   โ”‚   โ”œโ”€โ”€ us.jsonโ”‚   โ”‚   โ”œโ”€โ”€ gb.tsโ”‚   โ”‚   โ””โ”€โ”€ it.tsโ”‚   โ”œโ”€โ”€ ...โ”‚   โ””โ”€โ”€ App.tsxโ””โ”€โ”€ package.json