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>
  )
}