Helpers — the "filters" of a React theme

In a pipe-based template language you'd write {{ product.price | money }}. In a Tanqory theme the same transforms are plain functions imported from @tanqory/theme-kit:

import { formatMoney, formatDate, imageUrl } from '@tanqory/theme-kit'

<span>{formatMoney(product.price)}</span>
<time>{formatDate(article.publishedAt, { dateStyle: 'medium' })}</time>
<img src={imageUrl(product.featuredImage, { width: 800 })} />

Commerce formatters

Helper	Classic filter	Example
formatMoney(money)	money	฿1,290
formatMoneyWithCurrency(money)	money_with_currency	฿1,290 THB
formatMoneyWithoutCurrency(money)	money_without_currency	1,290
formatMoneyWithoutTrailingZeros(money)	money_without_trailing_zeros	฿1,290 (never .00)
formatWeight(weight)	weight_with_unit	1.2 kg

All money helpers take the Money shape ({ amount, currencyCode }) that every price field already uses, and format with the store's currency — not a hardcoded one.

Dates

Helper	Classic filter	Notes
formatDate(input, options?, locale?)	date / time_tag	Intl.DateTimeFormat-style options; UTC-stable so SSR and client render identically (no hydration mismatch)

Media

Helper	Classic filter	Notes
imageUrl(src, { width, height, crop })	image_url	Appends CDN transform params for resized/cropped variants
—	image_tag	Not needed — write <img>/<picture> in JSX

Translation

Helper	Classic filter	Notes
useT() → t(key)	t / translate	Reads the theme's locale files; falls back to the key

String · array · math — just use JavaScript

The large classic filter families are intentionally not re-implemented, because a React theme has the full language available:

Classic filter	JavaScript equivalent
upcase / downcase	s.toUpperCase() / s.toLowerCase()
truncate: 80	s.slice(0, 80) + '…'
split: ','	s.split(',')
replace / remove	s.replaceAll(a, b)
where: 'available'	items.filter(i => i.available)
map: 'title'	items.map(i => i.title)
sort / reverse / uniq	toSorted() / toReversed() / [...new Set()]
first / last / size	items[0] / items.at(-1) / items.length
plus / ceil / modulo	+ / Math.ceil() / %
json	JSON.stringify(v)
default: 'x'	v ?? 'x'
link_to, url_for	JSX <a href={…}> — URLs come pre-built on objects

Current gaps

• Color helpers (color_lighten, color_mix, contrast checks) have no built-in equivalent yet — use CSS color-mix() / your own utilities.
• handleize (slugify) has no exported helper — handles arrive already-built on every object, so you rarely need it.