Skip to main content

Internationalization (i18n)

When an image is displayed to an user we can get the language setting to provide a better experience for them.

To grab the locale variable get it from the components props.

import { TemplateProps } from "@flyyer/types";
import {Variable as V, Static, Validator } from '@flyyer/variables';

export const schema = V.Object({
currency: V.String({default: 'USD', examples: ['USD', 'EUR', 'CLP', 'RUB']}),
price: V.Number({examples: ['59.99']}),
});
type Variables = Static<typeof schema>;
const validator = new Validator(schema);

export default function MainTemplate({
locale = "en",
variables,
}: TemplateProps<Variables>) {
const { data: { currency, price } } = validator.parse(variables);

const formatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency,
currencyDisplay: 'symbol',
});
const display = formatter.format(price);

return (
<div>
Cost is: {display}
</div>
);
}