react-localize

react-localize

A simple React Context wrapper and text localization component for localizing strings.

Getting Started, Quickly:

Install it from npm, Inc.*:

npm i react-localize

*or via yarn add react-localize

Wire It Up to Your App:

import { LocalizationProvider, LocalizationConsumer } from 'react-localize';
// this should come from your server or localization strings bundle source
// for your application.
const localizationBundle = {
  'app.button.Submit': 'Submit',
  foo: {
    bar: 'Hey %s, you must be %d years old?'
  }
};

<LocalizationProvider messages={localizationBundle}>
  <AnyParentComponent>
    <LocalizationConsumer>
      {({ localize }) => {
        return <div>
          <h1>{localize('prop.MissingValue')}</h1>
          <button>{localize('app.button.Submit')}</button>
          <p>{localize('foo.bar', ['Stephen', 34])}</p>
        </div>;
      }}
    </LocalizationConsumer>
  </AnyParentComponent>
</LocalizationProvider>

// outputs:
// <div>
//   <h1>prop.MissingValue</h1>
//   <button>Submit</button>
//   <p>Hey Stephen, you must be 34 years old?</p>
// </div>

Please refer to our gitbook documentation for more detailed information & resources.

Changelog

2018-06-19 4.0.0-beta.2

Added

• More documentation (migration guide, <Text/> replacement guide)
• Made a few fixes to the _localize internal function flow, although the order of operations here may need to change again if there's feedback around the current way we invoke / don't invoke props.localize.