@ff2005/react-translations

react-translations

Simple library for react translation with hooks (and typescript).

Installation

npm install @ff2005/react-translations

Usage

App.js

import { TranslationsProvider } from '@ff2005/react-translations';
import Page from "./Page";
import en from './en.json';
import fr from './fr.json';

function App() {
  return (
    <TranslationsProvider translations={{ en, fr }}>
      <Page />
    </TranslationsProvider>
  );
}

export default App;

Page.js

import { useTranslation, useTranslationLanguage } from "@ff2005/react-translations";

function Page() {
  const [translationLanguage, setTranslationLanguage] = useTranslationLanguage();
  const t = useTranslation();

  setTimeout(() => {
    setTranslationLanguage({
      languageTag: 'fr',
      isRTL: false
    })
  }, 3000);

  return (
    <>
      <div>{t('app.title')}</div>
      <div>{JSON.stringify(translationLanguage)}</div>
    </>
  );
}

export default Page;

en.json

{
  "app": {
    "title": "My Application"
  }
}

fr.json

{
  "app": {
    "title": "Mon application"
  }
}

TranslationsProvider attributes

• translations - Object with each json language
• fallback - Object for the fallback language (ex: { languageTag: 'en', isRTL: false })

Contributing

Contributions are very welcome. Please check out the contributing document.

License

MIT.