react-translations

Simple library for react translation with hooks (and typescript if you need it).

My motivation to create this library was that I wanted something very simple and light to handle translations from json files, nothing more, nothing less.

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

Hooks

• useAvailableLanguages - return arrays of available languages form the browser
• useTranslationLanguage - return [language, setLanguage], language is a object with the current selected language and setLanguage is a function to change the selected language
• useTranslation - return function to query the translation

Errors

Check the console, if there is any missing translation you will see it 😉

Contributing

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

License

MIT.