Skip to content

Value formatting

Localization goes beyond translation by adapting data formats to match the user's locale. @localizer offers configurable data formatters for common scenarios, including:

The library provides a set of preconfigured formatters for common use cases, reducing the need for custom implementations.

What are formatters?

A formatter is a function that takes input and returns a localizable value. This allows formatted values to be used directly in UI components, template literals, or translations.

The library offers several predefined formatter types:

ValueFormatter<T>

ValueFormatter<T> formats a single value of type T into a localizable representation, suitable for standalone values like numbers, dates, or strings.

UnitValueFormatter<T, U>

UnitValueFormatter<T, U> formats a value of type T with an associated unit of type U, such as distances (12 km) or monetary amounts ($123.00). It ensures the output respects the user's locale and conventions.

ValueRangeFormatter<T>

ValueRangeFormatter<T> formats a range of values, taking two arguments of type T (start and end). It returns a localizable representation that aligns with the user's locale and formatting preferences.

RelativeValueFormatter<T>

RelativeValueFormatter<T> formats relative values using two arguments of type T: the value and a reference. It is ideal for representing changes (+20%) or time relative to an event (5 minutes ago).

NOTE

Developers can create custom formatters for scenarios requiring more than the predefined options. Custom formatters must return a Localizable value, enabling flexibility for unique formatting needs.

Best practice

Centralize all formatters to ensure consistent data formatting across your application. This simplifies updates and ensures uniformity in formatting rules.