Variable interpolation

It's quite common to create strings that contain variables.

Variable naming

Use simple camelCased names. Do not use hyphens or underscores.

JS/JSX

A simple example

MyComponent.messages.js:

import { defineMessages } from '@jutro/locale';

export default defineMessages({
  helloWorld: {
    id: 'appName.component.id',
    defaultMessage: 'Hello {someVar}.',
  },
});

Then, you'll want to interpolate the value:

import { TranslatorContext } from '@jutro/locale';
import messages from './MyComponent.messages';
...

export default () => {
    const translator = useContext(TranslatorContext);
    return (
        <div>
            {translator(messages.helloWorld, { someVar: "world" })
        </div>
    );
};

Output:

Hello world

A more realistic example

import { defineMessages } from '@jutro/locale';

export default defineMessages({
  premiumDue: {
    id: 'appName.component.id',
    defaultMessage: 'Your premium of {someAmount} is due on {someDate}.',
  },
});

Then, you'll want to interpolate correctly formatted values. Here's one way to do it:

import { formatDate, formatCurrency } from '@jutro/components';
import { TranslatorContext, IntlContext } from '@jutro/locale';
import messages from './MyComponent.messages';
...

export default () => {
    const translator = useContext(TranslatorContext);
    const intl = useContext(IntlContext);
    return (
        <div>
            {translator(messages.premiumDue, {
                someAmount: formatCurrency(intl, {
                    amount: 4324.34,
                    currency: 'usd',
                }),
                someDate: formatDate(intl, {
                    value: '2020-03-04',
                    displayFormat: 'long',
                }),
            })}
        </div>
    );
};

Variables containing dates, times, numbers etc. must be formatted according to the user's locale. (The user's language choice is not necessarily the same as their locale. While unlikely that a user would choose this - the architecture supports it).

Output generated from the above code is shown below, with both language and locale set to en-US:

Your premium of $4324.34 is due on March 4, 2020.

Passing arguments to translatable props

To pass arguments to a prop that has the type intlMessageShape, use the args field in the object. It will be translated by the component using TranslatorContext.

Let's take the Link component. The link text itself is translatable, but you may also want to interpolate an argument in the link text. Here's how to do it:

overdueAmount: {
    id: 'myapp.mycomponent.paymentOverdue',
    defaultMessage: 'A payment of {someAmount} is overdue!',
    description: 'A really good description',
},

You can pass a value for someAmount like this:

...
import messages from './MyComponent.messages';
...
export default () => {
    return (
        <Link to="/make-a-payment"
            children={{
                ...messages.overdueAmount,
                args: {
                    someAmount: formatCurrency(intl, {amount: 4223.34, currency: 'usd'}),
                },
            }},
        />
    );
};

Output for both language and locale set to en-US. Will appear as a link:

A payment of $4,223.34 is overdue!

Current limitations

As things stand, you can only override componentProps. As such, it is not possible to interpolate variables in strings that are not part of a component's componentProps. For example, this applies to the text on Button components, and others.