Introduction

What is a value formatter?

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 reference and a value. 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.