Simple i18n provider and hook for React

react-i18n.js

import React, { createContext, useContext, useState } from 'react';
import PropTypes from 'prop-types';

import en from './en';

const TranslationContext = createContext();

export const useTranslation = () => useContext(TranslationContext);

const data = {
  en,
};
const untranslated = {};

const TranslationProvider = ({ children }) => {
  const [state, setState] = useState({
    locale: 'en',
    setLocale: locale => setState(v => ({ ...v, locale })),
    t: (s) => {
      if (data.en[s]) {
        return data.en[s];
      }
      if (typeof untranslated[s] === 'undefined') {
        untranslated[s] = s;
      }
      return `*${s}*`;
    },
  });

  return (
    <TranslationContext.Provider value={state}>
      {children}
      <pre>{JSON.stringify(untranslated, null, 2)}</pre>
    </TranslationContext.Provider>
  );
};

TranslationProvider.propTypes = {
  children: PropTypes.node,
};

TranslationProvider.defaultProps = {
  children: null,
};

export default TranslationProvider;