l10n

l10n stands for the localization.

l10n is a library that aims to provide tools to help developers solve various localization problems.

Currency formatter

The library exports a function to create currency formatters configured to the user's language so that the user can avoid specifying it.

The library can be used directly and indirectly. If you import it directly, you will have to configure the language yourself. At the same time, if you use it through the Yoshi flows, you're free to skip this step as the language will be already set up for you.

Direct usage example

import { createCurrencyFormatterWithDefaults } from "@wix/l10n";

const createCurrencyFormatter = createCurrencyFormatterWithDefaults({
  language: "en"
});

const formatCurrency = createCurrencyFormatter({
  minimumFractionDigits: 0
});

const price = formatCurrency({ value: 100, currency: "USD" }); // "$100"

Yoshi flow example

import { useCurrencyFormatter } from "@wix/yoshi-flow-bm";

const MyApp = () => {
  const formatCurrency = useCurrencyFormatter({
    minimumFractionDigits: 2
  });

  return (
    <span>
      {formatCurrency({ value: 100, currency: "USD" })}
    </span>
  );
}

Wix has a proto definition for the money representation, so the library follows it to accept parameters according to it.

The idea behind it is that in most cases developers get data to represent from the backend where money is represented according to this proto message.

Having the same format eases the complexity as developers can use it to format the currency as is.

createCurrencyFormatter (as well as a React hook) is a memoized function, meaning that when called with the same parameters, the same instance of the Intl formatter will be returned. This is done to increase performance, since creating Intl instances is expensive.

API

CreateCurrencyFormatterWithDefaults

A function that returns a bound to the language factory to create formatters.

type CreateCurrencyFormatterWithDefaults = (
  params: { language: string }
) => CreateCurrencyFormatter;

createCurrencyFormatter

A factory that returns formatters.

type CreateCurrencyFormatter = (
  params?: Partial<CreateCurrencyFormatterArgs>,
) => (money: Money) => FormattedCurrencyResult;

CreateCurrencyFormatterArgs

For more information visit NumberFormat specification.

| Prop | Type | Default value | Description | |:---------------------------|:----------|---------------|:--------------------------------------------------------------------------------------------------------------:| | parts | boolean | false | Output in parts. Could be helpful when you want to decorate specific parts | | language | string | undefined | For user facing values, the language should be taken from the user’s Wix account language. For user-of-user facing values, the country should be taken from Site Languages in Settings or from Multilingual | | country | string | undefined | For user facing values, the country should be taken from the user’s browser. For user-of-user facing values, the country should be taken from Regional Format in Site Settings or Multilingual Regional Settings | | currencySign | string | undefined | In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign | | useGrouping | boolean | false | Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. | | minimumIntegerDigits | number | undefined | The minimum number of integer digits to use | | minimumFractionDigits | number | undefined | The minimum number of fraction digits to use | | maximumFractionDigits | number | undefined | The maximum number of fraction digits to use | | minimumSignificantDigits | number | undefined | The minimum number of significant digits to use | | maximumSignificantDigits | number | undefined | The maximum number of significant digits to use | | | | | |

Address formatter

A library for formatting Wix addresses in a localized format. The library addresses a simple yet annoying issue — the correct order of address parts for all countries. The solution is based on the Google's libaddressinput which uses an open source data set.

Direct usage example

import { formatAddress } from "@wix/l10n";

const App = () => {
  const address = formatAddress({
    address: {
      countryCode: 'US',
      subdivision: 'TX',
      city: 'Houston',
      postalCode: '77032',
      streetAddress: {
        name: 'Polk St',
        number: '4325',
      },
      country: 'United States',
    },
    addressContactDetails: {
      company: 'Sax Therapist',
      fullName: 'Martin Langford',
    }
  });

  return (
    <div>
      {address.map(part => <span key={part}>{part}</span>)}
    </div>
  );

  // <div>
  //  <span>Martin Langford</span>
  //  <span>Sax Therapist</span>
  //  <span>4325 Polk St</span>
  //  <span>Houston, TX 77032</span>
  //  <span>United States</span>
  // </div>
}