Skip to content
How to connect your locize project to your js-lingui react app.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
public
scripts
src
.babelrc
.gitignore
README.md
package.json
yarn.lock

README.md

This project was bootstrapped with Create React App and ejected.

Then we added js-lingui like documented.

integrate locize.com

Finally the locizer script was added to connect with locize.

Just change your index.js:

Before:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { I18nProvider } from 'lingui-react'

import messages from './locales/en.json'

ReactDOM.render(
  <I18nProvider language="en" messages={{ en: messages }}>
    <App />
  </I18nProvider>
, document.getElementById('root'));
registerServiceWorker();

After:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { I18nProvider } from 'lingui-react'
import locizer from 'locizer';

locizer.init({
  fallbackLng: 'en',
  referenceLng: 'en',
  projectId: '[your project id]'
}).load('translations', function(err, translations, lng) {
  ReactDOM.render(
    <I18nProvider language={lng} messages={{ [lng]: translations }}>
      <App />
    </I18nProvider>
  , document.getElementById('root'));
  registerServiceWorker();
});

Translations will be loaded and correct user language will be detected. For all the options go here.

You can’t perform that action at this time.