TranslationsProvider

TranslationsProvider is a provider component used to scope translating to the child components. To translate the entire application, you need to add this component at the root of all components. This allows you to set language to use and set of translated messages to be provided to the Text components (or Translation components in React Native). After adding the provider, you can use the Text components to display translated messages as you need.

You can import the TranslationsProvider component (and Text component) as the followings:

React#

import { Text, TranslationsProvider } from '@eo-locale/react';

Preact#

import { Text, TranslationsProvider } from '@eo-locale/preact';

React Native#

import { Translation, TranslationsProvider } from '@eo-locale/react-native';

After importing, you can use components in application like this:

const locales = [
  {
    language: 'en',
    messages: {
      hello: 'Hello {name}!',
    }
  },
  {
    language: 'fr',
    messages: {
      hello: 'Bonjour {name}!',
    }
  }
];

const siteLanguage = 'fr';

export default function App() {
  return (
    <TranslationsProvider language={siteLanguage} locales={locales}>
      <Text id={'hello'} name={'World'} />
    </TranslationsProvider>
  );
}

The followings are the configuration props of TranslationsProvider can be set:

type Message = string | number;

interface Locale {
  language: string;
  messages: {
    [translationKey: string]: Message | object
  };
}

type ErrorLogger = (error: Error) => void;

interface TranslationsProviderProps {
  language: string;
  locales: Locale[];
  onError?: ErrorLogger;
}