vcc-react-translate v1.0.0

vcc-react-translate

vcc-react-translation is a react module that can be imported in react based project specifically for translating text.

Usage

import { TranslationProvider } from 'vcc-react-translate';
...

ReactDom.render(
    <TranslationProvider translations={translations} >
      <App />
    </TranslationProvider>
    , document.getElementById('root'));
}

translations should be passed to translation prop of TranslationProvider. translations should be an object literal consisting of key/value pairs key being the key for the text to be translated and value being the actual translated text provided.

After this step, in each component that the texts should be translated, the component should be wrapped with translate function passed in the mapToProps funtion that maps the getLocalizedStr function to the props of that component.

const Dummy = ({ getLocalizedStr }) => {
    return <div>{getLocalizedStr('foo')}</div>;
};

const WrappedDummy = translate((translator) => ({
    getLocalizedStr: translator.getLocalizedStr
}))(Dummy);

export WrappedDummy;