Edit Pluralisation

Name

Also known as (comma separated)

Brief definition Grammatical handling of quantities across languages.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "count", "type": "number", "label": "Count", "default": 3, "min": 0, "max": 20, "step": 1 }, { "id": "noun", "type": "text", "label": "Noun", "default": "message" }, { "id": "locale", "type": "select", "label": "Locale (plural rules)", "default": "en", "options": [ "en", "ar", "pl" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"plur\" data-count=\"{{count}}\" data-noun=\"{{noun}}\" data-locale=\"{{locale}}\">\n <p class=\"plur__label\">Intl.PluralRules(&quot;{{locale}}&quot;).select({{count}}) &rarr; <span class=\"plur__cat\">&hellip;</span></p>\n <p class=\"plur__value\" style=\"color:{{accent}};\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".plur\");\n if (!el) return;\n var count = Number(el.dataset.count);\n var noun = el.dataset.noun;\n var locale = el.dataset.locale;\n var category = new Intl.PluralRules(locale).select(count);\n var messages = {\n en: { one: count + \" \" + noun, other: count + \" \" + noun + \"s\" },\n ar: { zero: \"no \" + noun + \"s\", one: \"one \" + noun, two: \"two \" + noun + \"s\", few: count + \" \" + noun + \"s (few)\", many: count + \" \" + noun + \"s (many)\", other: count + \" \" + noun + \"s\" },\n pl: { one: count + \" \" + noun, few: count + \" \" + noun + \" (few)\", many: count + \" \" + noun + \" (many)\", other: count + \" \" + noun }\n };\n var set = messages[locale] || messages.en;\n var msg = set[category] || set.other;\n el.querySelector(\".plur__cat\").textContent = category;\n el.querySelector(\".plur__value\").textContent = msg;\n})();</script>\n<style>\n.plur { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.plur__label { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }\n.plur__cat { font-weight: 700; color: #241430; }\n.plur__value { margin: 0; font-size: 20px; font-weight: 800; }\n</style>", "tailwind": "<div class=\"plurtw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\" data-count=\"{{count}}\" data-noun=\"{{noun}}\" data-locale=\"{{locale}}\">\n <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099]\">Intl.PluralRules(&quot;{{locale}}&quot;).select({{count}}) &rarr; <span class=\"plurtw__cat font-bold text-[#241430]\">&hellip;</span></p>\n <p class=\"plurtw__value m-0 text-xl font-extrabold\" style=\"color:{{accent}};\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".plurtw\");\n if (!el) return;\n var count = Number(el.dataset.count);\n var noun = el.dataset.noun;\n var locale = el.dataset.locale;\n var category = new Intl.PluralRules(locale).select(count);\n var messages = {\n en: { one: count + \" \" + noun, other: count + \" \" + noun + \"s\" },\n ar: { zero: \"no \" + noun + \"s\", one: \"one \" + noun, two: \"two \" + noun + \"s\", few: count + \" \" + noun + \"s (few)\", many: count + \" \" + noun + \"s (many)\", other: count + \" \" + noun + \"s\" },\n pl: { one: count + \" \" + noun, few: count + \" \" + noun + \" (few)\", many: count + \" \" + noun + \" (many)\", other: count + \" \" + noun }\n };\n var set = messages[locale] || messages.en;\n var msg = set[category] || set.other;\n el.querySelector(\".plurtw__cat\").textContent = category;\n el.querySelector(\".plurtw__value\").textContent = msg;\n})();</script>", "react": "import { useMemo } from \"react\";\n\nexport function Pluralisation({\n count = {{count}},\n noun = \"{{noun}}\",\n locale = \"{{locale}}\",\n accent = \"{{accent}}\",\n}) {\n const { category, message } = useMemo(() => {\n const cat = new Intl.PluralRules(locale).select(count);\n const messages = {\n en: { one: `${count} ${noun}`, other: `${count} ${noun}s` },\n ar: { zero: `no ${noun}s`, one: `one ${noun}`, two: `two ${noun}s`, few: `${count} ${noun}s (few)`, many: `${count} ${noun}s (many)`, other: `${count} ${noun}s` },\n pl: { one: `${count} ${noun}`, few: `${count} ${noun} (few)`, many: `${count} ${noun} (many)`, other: `${count} ${noun}` },\n };\n const set = messages[locale] || messages.en;\n return { category: cat, message: set[cat] || set.other };\n }, [count, noun, locale]);\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>Intl.PluralRules(\"{locale}\").select({count}) &rarr; <span style={{ fontWeight: 700, color: \"#241430\" }}>{category}</span></p>\n <p style={{ margin: 0, fontSize: 20, fontWeight: 800, color: accent }}>{message}</p>\n </div>\n );\n}" }