Getting Started

To use this Tool within a React project, we first need to assure that the initial setup has already been made. So that it can work properly: install the next dependencies.

Navigate to the React Project Folder

Before using any CLI commands, make sure to navigate to the React project folder and install the package @i18ncloud/react.

Installing using npm

#Using npm
npm install @i18ncloud/react

Initialization

There are 2 different options within Initialization:

• Create a new App;

• Clone the data from an existing one.

Create a New App

Using init, the CLI will prompt the auth service questions. And, once those were answered, we will then choose which languages will be added to the project.

Usage

Before using our Tool, the languages should be imported through importing i18n folder created after running init. This should be in the following path: <appFolder>/src. This import can be found in your index.js or App.js.

import './i18n';

You will also need to import the method useTranslation from react-i18next.

import { useTranslation } from 'react-i18next';

After these two steps, all you have to do is create the constants t and i18n from the useTranslation function

const { t, i18n } = useTranslation();

And use them in your project with the same syntax, from react-i18n-cloud

{t('key_name')}

Test Project

Check our test project in github.

GitHub - i18ncloud/test-i18ncloud-react: This project uses i18ncloud.com to manage internationalization on a react app.GitHub