ReactJS

The best way to use SimpleLocalize with ReactJS

1. Installation

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

or

yarn add react-intl-simplelocalize react-intl

NPM JavaScript Style Guide

2. Configuration

Copy Project Public 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);

3. 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

4. Voilà!

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