react-localize
A simple React Context wrapper and text localization component
for localizing strings.
<img src='https://coveralls.io/repos/github/sprjr/react-localize/badge.svg?branch=master' alt='React Localize Coverage Status' />
<img src="http://img.shields.io/travis/sprjr/react-localize.svg?style=flat" alt="React Localize Travis Builds" />
<img src="https://badges.greenkeeper.io/sprjr/react-localize.svg" alt="React Localize Greenkeeper Status" />
Documentation:
Please refer to our gitbook documentation for more detailed information & resources.Getting Started, Quickly:
Install it from npm, Inc.:
npm i react-localizeor via
yarn add react-localizeExample of usage:
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>