Skip to main content

Localizing a React Application with SejHey

Why should I use SejHey for react localization?​

SejHey is a powerful translation management platform that simplifies the localization process for your React project. It provides:

  • Centralized translation management: Easily manage all your translation keys and languages in one place.
  • Over-The-Air (OTA) updates: Update translations without redeploying your app.
  • Collaboration tools: Work with translators and developers seamlessly.
  • Dynamic loading: Fetch translations on demand, reducing initial load times.

Step by Step Guide to Localizing a React Application with SejHey​

1. Create an account and project on SejHey:

2. Install the SejHey React SDK:

  • Use npm to install the SejHey React SDK in your project:
 npm i @sejhey/react-i18n

3. Initialize SejHey in your React app:

  • Wrap your app with the SejHeyProvider and configure it with your project
import React from 'react'
import ReactDOM from 'react-dom/client'

import { SejHeyProvider } from '@sejhey/react-i18n'

const root = ReactDOM.createRoot(document.getElementById('root')!)

root.render(
  <SejHeyProvider
    i18nOptions={{
      lng: 'en', //Defines the default language

      fallbackLng: 'en', //Default fallback language to show when a translation is missing

      //If you want to use static files, you can define them like this, they will automatically be lazy loaded once the user changes language
      //This is useful for smaller apps or when you want to bundle translations with your app
      staticFiles: {
        en: () => import('./locales/en.json'), //Can be exported from SejHey as i18n JSON files
        fr: () => import('./locales/fr.json')
      },

      //Instead of static files, you can use a manifest URL to load translations dynamically. The manifest URL should point to a SejHey manifest file.
      manifestUrl: 'https://cdn.sejhey.com/**PROJECT_ID**/manifest.json', //The file type for this must be set to i18n JSON (.json)

      loader: <div>Loading translations...</div> //Optional loader component to show while translations are being fetched
    }}
  >
  <>{/*The rest of your content goes here*/}</>
  </SejHeyProvider>
)

3. (Optional) Create a OTAA Enviornment at SejHey

This is optional, but recommended for production use. It allows you to manage your translations more effectively and update them without redeploying your app. Copy the manifest URL provided by SejHey after creating your environment. Remember to use file format i18n JSON This URL will be used to fetch translations dynamically.

Once you have created your environment, you can use the manifest URL in your SejHeyProvider configuration.

Creating key



4. Use your translations in components:

  • Use the T component or useTranslate hook to access translations in your components.
import { T, useTranslate } from '@sejhey/react-i18n'

const MyComponent = () => {

  const { t } = useTranslate()

  return (
  <>
    {/* use the hook to display your tanslations */}
    {t('welcome_message')}

    {/* or use the T component to display your translations */}
    <T keyName='welcome_message' />
  </>
  )

}

Use Plurals and Parameters: You can also pass parameters to translations and use pluralization features:

import { T } from '@sejhey/react-i18n'

const MyComponent = () => {
  return (
    <div>
      {/* This will render "You have 3 unread messages" if the translation is set up correctly */}
      <T keyName='unread_messages' params={{ count: 3 }} />

      {/* This will render "Welcome, John!" if the translation is set up correctly */}
      <T keyName='welcome_name' params={{ name: 'John' }} />
    </div>
  )
}

5. All done!

Now your React application is set up with SejHey for localization. You can manage translations through the SejHey platform, and they will be dynamically loaded based on the user's language preference.

info

For more advanced usage, refer to the SejHey React SDK documentation.