@ubique-innovation/react-translations

This package provides functionality for handling translations in React projects.

Installation

yarn add @ubique-innovation/react-translations

Usage

Inside your index.tsx:

import { TranslationProvider } from '@ubique-innovation/react-translations';

const resources = {
    de: {
        messages: {
            hi: 'Hallo',
        }
    },
    en: {
        messages: {
            hi: 'Hello',
        }
    },
};

ReactDOM.render(
    <React.StrictMode>
        <TranslationProvider resources={resources} defaultLang="de">
            <YourApplication />
        </TranslationProvider>
    </React.StrictMode>,
    document.getElementById('root'),
);

This initializes the translation context with all translations and the default language. To use Translations inside your application, simply use:

import { useTranslation } from '@ubique/innovation/react-translations';

// ... inside your component
const { t } = useTranslation();

console.log(t('messages.hi')); // prints 'Hallo'

The useTranslation hook returns an object containing multiple utilities:

• t: function to get translations
• lang: current language
• availableLanguages: list of available languages
• changeLang: function to change language