@solid-primitives/i18n

---

Name: i18n Stage: 3 Package: "@solid-primitives/i18n" Primitives: createI18nContext, useI18n Category: Utilities

@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.3

Patch CJS support release.