A reactive solid-js
adapter for intl-schematic
.
npm i -s intl-schematic @intl-schematic/solid
Creates a reactive resource
with the locale document and user's locale
that is then passed in a closure to intl-schematic
and user-defined plugins.
import { createLocaleResource } from '@intl-schematic/solid';
const getDocument = (locale: Intl.Locale) => import(`/locales/${locale.baseName}.json`);
const createTranslator = createLocaleResource(
// Asynchronous locale fetching
() => Promise.resolve(new Intl.Locale(navigator.language)),
(getLocale: () => Intl.Locale) => [/* Array of custom plugins */]
)
export default function SolidComponent() {
const t = createTranslator(getDocument);
// Fully reactive,
// automatically re-renders when the locale changes
// or a new translation document is downloaded.
return <p>{t('some translation key')}</p>;
}