I18n

The I18n component is a set of different translation components. Its basic role is to convert the provided translation string into translated text.

If you have not read how the translation system works in Shopgate Engage, please read the guide for Using Translation System first.

Available components

• I18n.Text
• I18n.Date
• I18n.Time
• I18n.Number
• I18n.Price

I18n.Text

I18n.Text is the most commonly used translation component that renders a translated text by connecting the provided translation string with the language dictionary provided by the Shopgate Engage Theme or your extension.

Props

Name	Type	Default	Description
string*	string		translation string (e.g. myExtension.myTranslationString)
children	node	null	See Advanced Use section
params	Object	null	Set of named parameters for the translation string
className	string	null	CSS class name

Advanced use

For simple translations, you only need to use string props to translate the translation string.

// Dictionary: { someString: 'This is an example text' };
import { I18n } from '@shopgate/engage/components';

export default () => (
    <I18n.Text string="someString" />
);

This component produces the following HTML:

<span>This is an example text</span>

Use params for dynamic values

If your translation is more complex, use params for dynamic values:

// Dictionary: { someString: 'This is a complex test translation with a full component as params. Component is: {component}' };
import { I18n } from '@shopgate/engage/components';

export default () => (
    <I18n.Text
        string="someString"
        params={{
            component: 'just a string'
        }}
    />
);

This produces the following HTML:

<span>
    This is a complex test translation with a full component as params. Component is: just a string
</span>

Use params for dynamic values as nodes

Params accept any valid React node (so, string, null, or an actual node).

// Dictionary: { someString: 'This is a complex test translation with a full component as params. Component is: {component}' };
import { I18n } from '@shopgate/engage/components';

export default () => (
    <I18n.Text
        string="someString"
        params={{
            component: (<strong>React node</strong>)
        }}
    />
);

This produces the following HTML:

<span>
    This is a complex test translation with a full component as params. Component is: <strong>React node</strong>
</span>

This approach can be very handy for dynamic values, but as your params get more complex, your jsx code becomes more difficult to read.

This is why we prepared another way of translating complex translations.

Children as params.

If your translation expects params to be passed, it can also be done by passing children with a forKey prop.

The forKey prop declares that a node should be treated as a translation string parameter. For example:

// Dictionary: { someString: 'This is a complex test translation with a full component as params. Component is: {component}' };
import { I18n } from '@shopgate/engage/components';

export default () => (
    <I18n.Text string="someString">
        <strong forKey="component">
            a child component injected into a translation
        </strong>
    </I18n.Text>
);

This produces following HTML:

<span>
    This is a complex test translation with a full component as params. Component is: <strong>a child component injected into a translation</strong>
</span>

I18n.Date

I18n.Date translates an unix epoch (in milliseconds) to a localized date format.

Props

Name	Type	Default	Description
timestamp*	number		Epoch timestamp in milliseconds
format	string	medium	Date format. Possible values same as in native DateTimeFormat

Example:

import { I18n } from '@shopgate/engage/components';

export default () => (
    <I18n.Date timestamp={new Date(0).getTime()} format="long" />
);

<span>January 1, 1970</span>

I18n.Time

I18n.Time translates an unix epoch (in milliseconds) to a localized time format.

Props

Name	Type	Default	Description
timestamp*	number		Epoch timestamp in milliseconds
format	string	medium	Time format. Possible values same as in native DateTimeFormat

Example:

import { I18n } from '@shopgate/engage/components';

export default () => (
    <I18n.Time timestamp={new Date(0).getTime()} format="long" />
);

<span>1:00:00 AM GMT+1</span>

I18n.Number

I18n.Number translates a number into a localized string.

Props

Name	Type	Default	Description
number*	number		Epoch timestamp in milliseconds
fractions	number	0	Number of fraction digits to use
className	string	null	CSS class name

Example:

import { I18n } from '@shopgate/engage/components';

export default () => (
    <I18n.Number number={1000} fractions={2}/>
);

<span>1,000.00</span>

I18n.Price

I18n.Price translates a number into a localized price.

Props

Name	Type	Default	Description
price*	number		Amount ($100.50 === 100.5)
currency*	string		Currency code
className	string	null	CSS class name
fractions	boolean	true	Whether to always show fraction digits (100 => $100.00)

Example:

import { I18n } from '@shopgate/engage/components';

export default () => (
    <I18n.Price price={1000} currency="USD"/>
);

<span>$1,000.00</span>

Related articles:

• Using the translation system
• i18n helper