Edit Currency Formatting

Name

Also known as (comma separated)

Brief definition Locale-appropriate currency presentation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "amount", "type": "number", "label": "Amount", "default": 1234.5, "min": 0, "max": 999999, "step": 0.5 }, { "id": "locale", "type": "select", "label": "Locale", "default": "en-US", "options": [ "en-US", "de-DE", "ja-JP" ] }, { "id": "showCode", "type": "toggle", "label": "Show currency code instead of symbol", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"curf\" data-amount=\"{{amount}}\" data-locale=\"{{locale}}\" data-code=\"{{showCode}}\">\n <p class=\"curf__label\">new Intl.NumberFormat(&quot;{{locale}}&quot;, &#123; style: &quot;currency&quot; &#125;)</p>\n <p class=\"curf__value\" style=\"color:{{accent}};\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".curf\");\n if (!el) return;\n var amount = Number(el.dataset.amount);\n var locale = el.dataset.locale;\n var code = el.dataset.code === \"true\";\n var currency = { \"en-US\": \"USD\", \"de-DE\": \"EUR\", \"ja-JP\": \"JPY\" }[locale] || \"USD\";\n var fmt = new Intl.NumberFormat(locale, { style: \"currency\", currency: currency, currencyDisplay: code ? \"code\" : \"symbol\" });\n el.querySelector(\".curf__value\").textContent = fmt.format(amount);\n})();</script>\n<style>\n.curf { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.curf__label { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; word-break: break-word; }\n.curf__value { margin: 0; font-size: 28px; font-weight: 800; }\n</style>", "tailwind": "<div class=\"curftw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border\" data-amount=\"{{amount}}\" data-locale=\"{{locale}}\" data-code=\"{{showCode}}\">\n <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099] break-words\">new Intl.NumberFormat(&quot;{{locale}}&quot;, &#123; style: &quot;currency&quot; &#125;)</p>\n <p class=\"curftw__value m-0 text-3xl font-extrabold\" style=\"color:{{accent}};\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".curftw\");\n if (!el) return;\n var amount = Number(el.dataset.amount);\n var locale = el.dataset.locale;\n var code = el.dataset.code === \"true\";\n var currency = { \"en-US\": \"USD\", \"de-DE\": \"EUR\", \"ja-JP\": \"JPY\" }[locale] || \"USD\";\n var fmt = new Intl.NumberFormat(locale, { style: \"currency\", currency: currency, currencyDisplay: code ? \"code\" : \"symbol\" });\n el.querySelector(\".curftw__value\").textContent = fmt.format(amount);\n})();</script>", "react": "import { useMemo } from \"react\";\n\nexport function CurrencyFormatting({\n amount = {{amount}},\n locale = \"{{locale}}\",\n showCode = {{showCode}},\n accent = \"{{accent}}\",\n}) {\n const value = useMemo(() => {\n const currency = { \"en-US\": \"USD\", \"de-DE\": \"EUR\", \"ja-JP\": \"JPY\" }[locale] || \"USD\";\n return new Intl.NumberFormat(locale, { style: \"currency\", currency, currencyDisplay: showCode ? \"code\" : \"symbol\" }).format(amount);\n }, [amount, locale, showCode]);\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\", wordBreak: \"break-word\" }}>new Intl.NumberFormat(\"{locale}\", {\"{\"} style: \"currency\" {\"}\"})</p>\n <p style={{ margin: 0, fontSize: 28, fontWeight: 800, color: accent }}>{value}</p>\n </div>\n );\n}" }