Localize a React project during Webpack builds
Last updated 2 years ago by montzkie18 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-localoader 
SYNC missed versions from official npm registry.

React Localization Loader

npm version Build Status

Automatically converts all your React components from this:

import React from 'react';
import Tooltip from './Tooltip';

const CustomComponent = (props) => (
    Welcome {props.username}, click <a href="">here</a>
    <Tooltip text="Hi there"/>

To this:

import i18n from 'react-localoader/lib/i18n';
import Localize from 'react-localoader/lib/components/Localize';
import React from 'react';
import Tooltip from './Tooltip';

const CustomComponent = (props) => (
    <Localize elements={[<a href="">$1</a>]}
      expressions={{"props-username": props.username}}
    >Welcome %[props-username], click *here*</Localize> 
    <Tooltip text={i18n.t("Hi there")}/>


npm install --save react-localoader

In your webpack config, just add a new loader for JS/JSX files like this:

var baseConfig = {
  // ...
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        loader: 'react-localoader'

Config File

All configurations are loaded from .i18nrc JSON file located at the root of your project folder. The JSON file looks like something below:

  "basePath": ".",
  "srcFolders": ["src"],
  "defaultLocale": "en",
  "exportPath": "./public/locale",
  "attributeNames": ["text", "placeholder", "label", "content"],
  "attributeIgnores": ["textSpacing", "labelPosition"]

Config Options


Root folder to search for source files to localize.


Folders inside the basePath where all your JS/JSX files are located. This is used by the CLI commands and not by the webpack loader. Supports glob patterns.


Defines which locale your current React components are written so they can be exported to ${exportPath}/${defaultLocale}.json


Folder where all exported ${locale}.json data will be saved.


Regex patterns of JSX attributes you want to localize. Remember that this is always treated as a pattern so label will always include both label and labelPosition. You must include labelPosition to attributeIgnores if you do not want it to be localized.


List of specific attribute names you want excluded from localization.


You can use the following commands to manage your locale data.

> react-localoader export

Applies localization to all your source code inside your defined srcFolders. It then extracts all the children of <Localize> tag and first param of i18n.t() call. All this strings are compiled and saved to ${exportPath}${defaultLocal}.json in the following format:

    "string_keyhash": {
      "description": "./path/to/component/this/was/extracted/from",
      "text": "Text we need to localize"


This project was inspired by Jon Jensen's work here

Current Tags

  • 1.0.6                                ...           latest (2 years ago)

7 Versions

  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 7
Dependencies (5)
Dependents (0)

Copyright 2014 - 2016 © |