A Locale Module is a translation file in which all properties and translations are scoped locally by default.

modular and reusable translations

• No more conflicts
• Explicit dependencies
• No global scope

additional features

• Automatic extraction of the translations
• Information about missing translations across languages (one module)
• Default translation (loader can always merge default and current language)
• Nested translations

/* ./locale/en_US.js */
export default {
  button: {
    next: 'Next'
  }
}

/* ./locale/sk_SK.js */
export default {
  button: {
    next: 'Dalej'
  }
}

/* ./Example.jsx  */
import React, { Component } from 'react';
import Translate from 'react-translate-maker';
import locale from './locale';

export default class Example extends Component {
  render() {
    return (
      <Translate path={locale.button.next} defaultValue="Next" />
    );
  }
}

For local path camelCase naming is recommended, but not enforced.

It's possible to compose translation from other Locale Modules.

Example will be here soon

The main idea is very similar to CSS Modules. We already implemented webpack plugin for the locales modules named translate-maker-loader which you are able to use on the server too with the babel-plugin-webpack-loaders. This loader also contains locale extractor (plugin). This plugin will extract all translations into the locale files. You can load this files with the adapter of the translate-maker available for the React too react-translate-maker.