localization.messages
Messages in ICU MessageFormat, by key, in catalogs by language tag: the returned function formats a key in the catalog of the user's best language, which it reads at each call, so a component follows a change of language. A key that catalog lacks comes from the first catalog.
Usage
Translate text with plurals
import { HStack, Symbol, Text, localization } from 'kuito';
const t = localization.messages({
en: { inbox: '{count, plural, =0 {No messages} one {# message} other {# messages}}' },
ar: { inbox: '{count, plural, zero {لا رسائل} one {رسالة واحدة} other {# رسائل}}' },
});
export function Inbox() {
return (
<HStack paddingInlineStart={16} paddingInlineEnd={8} gap={8} alignItems="center">
<Symbol name={{ ios: 'tray', android: 'inbox' }} />
<Text>{t('inbox', { count: 3 })}</Text>
</HStack>
);
}Signatures
<const C extends MessageCatalogs>(catalogs: C): (key: MessageKey<C>, values?: MessageValues) => stringType parameters
| Name | Constraint | Default |
|---|---|---|
C | Readonly<Record<string, Readonly<Record<string, string>>>> | — |
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
catalogs | C | Yes | — |
Returns
(key: MessageKey<C>, values?: MessageValues) => string
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.