ReactJS ecosystem

The best way to use SimpleLocalize with ReactJS

1. Create a new project

  • Setup account here: https://app.simplelocalize.io

  • Create a new project with type: 'just CDN'

  • Open created project

  • Go to Settings tab where you will find all needed details in further steps

2. Setup CLI for keys auto-discovery

Before we start integrating i18n in our application, we will configure CLI tool for searching i18n keys in application source code. Go to yahoo/react-intl CLI setup.

3. Connect your application to SimpleLocalize CDN

3a. Installation

This is the final step.

npm install --save react-intl-simplelocalize react-intl

or

yarn add react-intl-simplelocalize react-intl

NPM JavaScript Style Guide

3b. Configuration

  • Copy project token from Settings tabs.

Public project token in CDN details section
  • Wrap your main application component with <SimpleLocalize /> same as you do with redux <Provider/>,and add projectToken property with copied token from previous step.

import SimpleLocalize from 'react-intl-simplelocalize'
const app = document.getElementById("root");
render(
<SimpleLocalize projectToken="<PROJECT_TOKEN>">
<App/>
</SimpleLocalize>, app);

3c. Usage

Start using <FormattedMessage />components from yahoo/react-intl.

import React from "react";
import {FormattedMessage} from "react-intl";
class Home extends React.Component {
render() {
return (<FormattedMessage id="SUCCESS" />);
}
}
export default Footer;

Now you can open terminal, go to project directory and run CLI to search and push key: SUCCESS to the cloud.

curl -s https://get.simplelocalize.io | bash
Example output from CLI
Uploaded 'SUCCESS' key to the cloud

3d. Translate, click Publish, refresh your application, and voilà!

That's all, translations now will be loaded from the CDN, and injected automatically to the app, even after deployment.