Skip to content

tevim/react-make-t

Repository files navigation

CircleCI

react-make-t

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

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

type MakeT = (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.
//
const translations = {
  de: {
    welcome: 'Herzlich Willkommen'
  }
}

function makeT(locale) {
  const entries = translations[locale]
  
  if (!entries) throw new Error(`Unknown language: ${locale}`)
  
  return function (key) {
    const value = entries[key]
    return value || 'translation missing'
  }
}

//
// Make the current `locale` and `makeT` available to the application.
//
function App() {
  return (
    <I18nProvider locale='de' makeT={makeT}>
      <WelcomePage name={'JJ'}/>
    </I18nProvider>
  )
}

//
// Translate your components!
//
function WelcomePage({name}) {
  return (
    <I18nConsumer>
      {(i18n) =>
        <h1>{ i18n.t('welcome') } {name}!</h1>
        <p>The current locale is { 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.

About

Simple internationalization library for React

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •