react-make-t

Internationalization... It should be simple, right? 😉

With react-make-t all there is to internationalization is a simple function of type

typeMakeT=(locale: ILocale)=>((targs: ITArgs)=>string))

This library works nicely with Next.js, but also with any other React app.

Installation

Install the package with:

npm install react-make-t

Usage

Then use the module in your code:

import{createI18nContext}from'react-make-t'const{ I18nProvider, I18nConsumer }=createI18nContext({locale: 'de',t: ()=>''})//// A simple implementation of `makeT` which fetches translated strings from an object.//consttranslations={de: {welcome: 'Herzlich Willkommen'}}functionmakeT(locale){constentries=translations[locale]if(!entries)thrownewError(`Unknown language: ${locale}`)returnfunction(key){constvalue=entries[key]returnvalue||'translation missing'}}//// Make the current `locale` and `makeT` available to the application.//functionApp(){return(<I18nProviderlocale='de'makeT={makeT}><WelcomePagename={'JJ'}/></I18nProvider>)}//// Translate your components!//functionWelcomePage({name}){return(<I18nConsumer>{(i18n)=><h1>{i18n.t('welcome')}{name}!</h1><p>Thecurrentlocaleis{i18n.locale}</p>}
</I18nConsumer>)}

Examples

You may also have a look at the examples located in the examples directory. These can be run locally by cloning this repo, and then running npm install && npm run dev inside one of the example directories.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using npm test.

License

react-make-t is Copyright © 2019 tevim GmbH. It is free software, and may be redistributed under the terms specified in the LICENSE file.