> l10n stands for the [localization](https://en.wikipedia.org/wiki/Language_localisation).
npm install @wix/l10n> l10n stands for the localization.
l10n is a library that aims to provide tools to help developers solve various localization problems.
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
``ts
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
`tsx
import { useCurrencyFormatter } from "@wix/yoshi-flow-bm";
const MyApp = () => {
const formatCurrency = useCurrencyFormatter({
minimumFractionDigits: 2
});
return (
{formatCurrency({ value: 100, currency: "USD" })}
);
}
`
> 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.
##### CreateCurrencyFormatterWithDefaults
A function that returns a bound to the language factory to create formatters.
`ts`
type CreateCurrencyFormatterWithDefaults = (
params: { language: string }
) => CreateCurrencyFormatter;
##### createCurrencyFormatter
A factory that returns formatters.
`ts`
type CreateCurrencyFormatter = (
params?: Partial
) => (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 | | | | | |
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
`ts
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 (
//