README
@solid-primitives/i18n
Creates a method for internationalization support. This primitive set is largely inspired by dlv and passes all its tests.
How to use it
Install it:
yarn add @solid-primitives/i18n
Use it:
import { render } from "solid-js/web";
import { Component, createSignal } from "solid-js";
import { I18nContext, createI18nContext, useI18n } from "@solid-primitives/i18n";
const App: Component = () => {
const [t, { add, locale, dict }] = useI18n();
const [name, setName] = createSignal("Greg");
const addLanguage = () => {
add("sw", { hello: "hej {{ name }}, hur mar du?" });
locale("sw");
};
return (
<>
<button onClick={() => locale("fr")}>fr</button>
<button onClick={() => locale("en")}>en</button>
<button onClick={() => locale("unknownLanguage")}>unknown language</button>
<button onClick={addLanguage}>add and set swedish</button>
<input value={name()} onInput={e => setName(e.target.value)} />
<hr />
<h1>{t("hello", { name: name() }, "Hello {{ name }}!")}!</h1>
<p>{locale()}</p>
<pre>
<code>{JSON.stringify(dict("sw"), null, 4)}</code>
</pre>
</>
);
};
const dict = {
fr: {
hello: "bonjour {{ name }}, comment vas-tu ?"
},
en: {
hello: "hello {{ name }}, how are you?"
}
};
const value = createI18nContext(dict, "fr");
render(
() => (
<I18nContext.Provider value={value}>
<App />
</I18nContext.Provider>
),
document.getElementById("app")
);
Demo
You may view a working example here: https://codesandbox.io/s/use-i18n-rd7jq?file=/src/index.tsx
Changelog
Expand Changelog
0.0.100
First commit of the i18n primitive.
1.0.0
General package clean-up and added testing facility.
1.0.1
Releasd with CJS support.
1.0.8
Patch CJS support release.
1.0.9
Updated to Solid 1.3