Text

Text component provides ability to format string values. It supports ICU Message Syntax. More information you can find on official website.

Displaying Messages#

Text components required an ID to be display a message. The ID is can be provided on the TranslationsProvider component.

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

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

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

As above example, component will display like:

Hello World!

Text component can get a message by an ID provided in nested JSON locales, for example:

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

const locales = [
  {
    language: 'en',
    messages: {
      page1: {
        hello: 'Hello {name}! Welcome to page1!',
      },
    }
  },
  {
    language: 'fr',
    messages: {
      page1: {
        hello: 'Bonjour {name}! Bienvenue à la page1!',
      },
    }
  }
];

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

As above example, component will display like:

Hello World! Welcome to page1!

Displaying Fallback Messages#

If there are locales that do not provide some IDs, you can set defaultMessage to display a fallback message. The fallback message will be memorized for later use.

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

const locales = [
  {
    language: 'en',
    messages: {}
  }
]

export function SomeComponent() {
  return (
    <TranslationsProvider language='en' locales={locales}>
      <Text id='hello' defaultMessage='Hello {name}!' name='World' />
    </TranslationsProvider>
  );
}

As above example, component will display like the first example.

Displaying HTML Content#

If you need to render html content, just provide html property as true.

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

export function SomeComponent() {
  return (
    <TranslationsProvider language='en' locales={[]}>
      <Text id='hello' html defaultMessage='<strong style="font-size: 1.2em;">Hello {name}!</strong>' name='World' />
    </TranslationsProvider>
  );
}

As above example, component will display like:

Hello World!

Plural Formatting#

Text components support plural formatting. The following is an example of displaying the plural value.

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

const countItem = '1';

export function SomeComponent() {
  return (
    <TranslationsProvider language='en' locales={[]}>
      <Text
        count={countItem}
        defaultMessage='{count, plural, one {You have one item.} other {You have {count} items.}}'
        id='counting'
      />
    </TranslationsProvider>
  );
}

If count='1', component will display You have one item.

If count='4', component will display You have 4 items.

Usage in React Native#

In React Native, there is a component named Text for display texts already. To avoid confusion, eo-locale/react-native prepared a component named Translation. You need to use this within the Text component to display a translated text.

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

const App: () => React$Node = () => {
  return (
    <TranslationsProvider language="en" locales={[]}>
      <Text>
        <Translation id="hello" defaultMessage="Hello {name}!" name="World" />
      </Text>
    </TranslationsProvider>
  );
};

export default App;