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>  );}