Locale-aware formatting
Display a date or time in a chosen locale within localized UI text.
Clerk · Pipe
has
Clerk localization pipes pass a runtime value through a named formatter, optionally with arguments. Pipes can be chained so each formatter receives the preceding result.
How it works
In Clerk localization strings, the pipe passes a runtime value to the modifier on its right. Modifiers can accept arguments, and multiple pipes can be chained so each modifier receives the previous modifier's result.
Syntax
{{ variable | modifier(...args) }}Parameters
| Name | Type | Description |
|---|---|---|
variable | runtime value | Runtime value inserted into the localization expression and passed through the pipe. |
args | formatter arguments | Optional values supplied to the named formatter. |
Returns
The value produced by the modifier, or by the final modifier when pipes are chained.
Key points
- Localization strings use a dedicated template language for runtime formatting expressions.
- The expression form places a variable and modifier inside double curly braces.
- The pipe transfers the value into the modifier that follows it.
- Modifiers are named formatters and may be supplied with arguments.
- A locale can be provided to a time-formatting modifier as an argument.
- Multiple modifiers can be composed sequentially.
Common mistakes
- When chaining modifiers, remember that each step operates on the output produced by the preceding step.
Example: Format a localized date
const text = "Yesterday at {{ date | timeString('en-US') }}";A localization template applies the timeString formatter to date using the en-US locale.
When to use it
Composable formatting
Apply several formatting transformations in sequence.
Interview questions
QWhat does the pipe operator do in Clerk localization strings?
The pipe operator sends the value on its left to the named modifier on its right. A modifier may also receive optional arguments, such as a locale.
Follow-up: What happens when multiple pipes are used? Each pipe is evaluated in sequence, with the next modifier receiving the previous modifier's result.
QWhat are the parts of a Clerk localization pipe expression?
The variable is the runtime value, the pipe connects it to a modifier, and the modifier applies formatting. For example, a date can be passed to timeString with an en-US locale.
Follow-up: How would you format the same value for another locale? Pass the desired locale as the modifier's argument.
QCan Clerk localization modifiers accept arguments?
A modifier is a named formatter written with parentheses, and its arguments are optional. The formatter can therefore be used with no arguments or with values such as a locale.
Follow-up: Can formatting be composed? Yes; chain modifiers so each receives the preceding result.
Related
modifiertimeStringlocalization stringstemplate language