MxReaKit - I18n

Provides tools to easily implement or upgrade internationalization in a React project.

WARN: This package is experimental and subject to frequent changes. It is not intended for public use.

Table of Contents

• How to install?
• How to set up?
• How to translate?
• How to change the language?

How to install?

1. Go to the root of your project (where your package.json file is located).
2. Run npm i @mxreakit/i18n.

How to set up?

1. Create your translations.

   export const translations = {
       en: {
           'hello': 'Home',
           'about': 'About Us',
       },
       fr: {
           'hello': 'Accueil',
           'about': 'À propos',
       },
       es: {
           'hello': 'Inicio',
           'about': 'Sobre nosotros',
       }
   };

2. Wrap your app with I18nProvider.

   import { createRoot } from 'react-dom/client';
   import { I18nProvider } from '@mxreakit/i18n';
   import { BrowserRouter, Routes, Route } from 'react-router-dom';
   import { translations } from '@/your/path/to/translations.ts';
      
   const App = () => (
     <I18nProvider translations={translations} defaultLanguage="fr">
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </BrowserRouter>
     </I18nProvider>
   );
      
   createRoot(document.getElementById('root')!).render(<App />);

3. Remember to link your translations to the I18nProvider and select a default language (English if not specified).

How to translate?

1. You need to follow the steps to set up the package
2. Import the useI18n() hook and use the t() ou tc() functions by passing key translation.

   import { useI18n } from '@mxreakit/i18n';
   
   export const HomePage = () => {
       const { t } = useI18n();
   
       return (
           <section>
               <h1>{t('hello')}</h1>
               <p>{t('about')}</p>
           </section>
       );
   };

How to change the language?

1. You need to follow the steps to set up the package
2. Import the useI18n() hook and use the setLanguage() function by passing key language.

   import { useI18n } from '@mxreakit/i18n';
   
   export const HomePage = () => {
       const { setLanguage  } = useI18n();
   
       return (
           <section>
               <button onClick={() => setLanguage('en')}>EN</button>
               <button onClick={() => setLanguage('fr')}>FR</button>
           </section>
       );
   };