[@tiny-intl/solid](./packages/solid) 
npm install @tiny-intl/solid-js@tiny-intl/solid !Solid Adater Size
A tiny library to translate or transform strings, dates and numbers based on native Intl.
``bash`
npm install @tiny-intl/core @tiny-intl/solid-js
`json`
// en-US.json
{
"messages": {
"hello": "Hello {{name}}!",
"document": {
"one": "Document",
"other": "Documents"
// supports also zero, two, few, many
}
}
}
`jsx
import { createTinyIntl, detectBrowserLocale } from '@tiny-intl/core';
import { TinyIntlContext } from '@tiny-intl/solid-js';
const intl = createTinyIntl({
fallbackLocale: 'en-US',
supportedLocales: ['en-US', 'de-DE'],
loadDict: async (nextLoc) => {
const dict = (await import(./locales/${nextLoc}.json)).default;
return dict.messages;
},
detectLocale: ({ supportedLocales, fallbackLocale }) => {
// or any custom logic
return detectBrowserLocale({ supportedLocales, fallbackLocale });
},
});
const App = () => {
const [i18nMounted, setI18nMounted] = createSignal(false);
intl.mount().then(() => {
setI18nMounted(true);
});
return (
);
};
`
This package uses native plural rules from Intl MDN.
`jsx
import { useIntl, Translate } from '@tiny-intl/solid-js';
// via primitive
const MyComponent = () => {
const { t, tc } = useIntl();
return (
// via component
const MyComponent = () => {
return (
$3
Look at MDN for more options.
jsx
import { useIntl } from '@tiny-intl/solid-js';// via primitive
const MyComponent = () => {
const { d } = useIntl();
return (
{/ Tuesday, April 6, 2021 /}
{d(new Date(), { dateStyle: 'full' })()}
);
};// via component
const MyComponent = () => {
return (
{/ Tuesday, April 6, 2021 /}
);
};
`$3
Look at MDN for more options.
jsx
import { useIntl } from '@tiny-intl/solid-js';// via primitive
const MyComponent = () => {
const { rt } = useIntl();
const date = new Date('2023-10-18T21:44:00.000z');
return (
{/ 1 day ago /}
{rt(date)}
);
};// via component
const MyComponent = () => {
return (
{/ 1 day ago /}
);
};
`$3
Look at MDN for more options.
jsx
import { useIntl } from '@tiny-intl/solid-js';// via primitive
const MyComponent = () => {
const { n } = useIntl();
return (
{/ €123,456.79 /}
{n(123456.789, { style: 'currency', currency: 'EUR' })()}
);
};// via component
const MyComponent = () => {
return (
{/ €123,456.79 /}
);
};
`$3
Look at MDN for more options.
> [!NOTE]
> Only available via primitive.
jsx
import { useIntl } from '@tiny-intl/solid-js';// via primitive
const MyComponent = () => {
const { list } = useIntl();
return (
{/ a, b, and c /}
{list(['a', 'b', 'c'])}
{/ a, b, or c /}
{list(['a', 'b', 'c'], 'OR')}
{/ a b c /}
{list(['a', 'b', 'c'], { type: 'unit', style: 'narrow' })}
);
};
`$3
Look at MDN for more options.
> [!NOTE]
> Only available via primitive.
jsx
import { useIntl } from '@tiny-intl/solid-js';// via primitive
const MyComponent = () => {
const { sort, collator } = useIntl();
return (
{/ en-US: ['a', 'ä', 'Z', 'z'], swedish: ['a', 'Z', 'z', 'ä'] /}
{sort(['Z', 'a', 'z', 'ä'], { caseFirst: 'upper' })}
{/ [{ name: 'a' }, { name: 'Z' }] /}
{[{ name: 'Z' }, { name: 'a' }].sort((a, b) => collator(a.name, b.name))}
);
};
`$3
jsx
import { useIntl } from '@tiny-intl/solid-js';const MyComponent = () => {
const { change, getLocale } = useIntl();
return (
{getLocale()}
);
};
``