use-mini18n is a simple and minimalistic React hook library for i18n

#react #i18n #javascript

I'm a personal developer making web apps.
My native language is Japanese. But I'm adding English to my app's language set because I want it to be used by people all over the world.
(I would really like to support many languages, but I haven't had the time to work on that yet, so I haven't been able to make it work.)

For example, I'm creating a web app this.

Dig Music - Dig Music is a web application for discovering new music

When it comes to i18n support for web apps, I was thinking about using react-i18next or react-intl(It seems to be included in a monorepo now called FormatJS) for i18n support.

react-i18next and react-intl are both very nice React libraries for i18n, and I've used them before. I have used them and they work very well.

However, my web app is very small, and setting react-i18next and react-intl to support i18 felt a bit over-specified.
I wanted to use an i18n library that was easy to implement and simple to use, even if it had few features.

I looked around a bit, but there didn't seem to be such a library, so I decided to create my own.
I also wanted to learn about creating a React hooks library using TypeScript.

use-mini18n - A simple and minimalistic React hook library for i18n

This library is very simple.
Here's a simple example.
(You can see it in action in CodeSandbox)

import React from "react";
import ReactDOM from "react-dom";
import { TransProvider, useI18n } from "use-mini18n";
import "./styles.css";

const i18n = {
  en: {
    Hello: "Hello {name}",
    "Start editing to see some magic happen!":
      "Start editing to see some magic happen!"
  },
  ja: {
    Hello: "こんにちは {name}",
    "Start editing to see some magic happen!":
      "いくつかの魔法を目にするために編集を開始します！"
  }
};

const App = () => {
  const { t, lang, langs, changeLang, getText } = useI18n();

  return (
    <div className="App">
      <h1>{getText("Hello", { name: "CodeSandbox" })}</h1>
      <h2>{t["Start editing to see some magic happen!"]}</h2>
      <hr />
      <p>Selected lang: {lang}</p>
      <select
        name="lang"
        onChange={({ target }) => changeLang(target.value)}
        value={lang}
      >
        {langs.map((l, i) => (
          <option value={l} key={i}>
            {l}
          </option>
        ))}
      </select>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <TransProvider i18n={i18n}>
      <App />
    </TransProvider>
  </React.StrictMode>,
  rootElement
);

The only thing the developer can do with use-mini18n is what is described in this sample code.
There are some minor options available. Please refer to the README and examples.

Also, use-mini18n defaults to saving the user's preferred language in localStorage.
I designed it this way because I wanted to get away as a developer from managing language settings.
If you don't want to do that, there is an option to not use localStorage.

<TransProvider i18n={i18n} enableLocalStorage={false}>
  <App />
</TransProvider>

That's the end of my introduction to use-mini18n.

I created this to make it easier to deal with i18n, a must-have for web app creation in React.
I'm happy with use-mini18n's minimalist worldview. Its library doesn't cover everything, but that's okay.
If I feel that use-mini18n doesn't cover it, I'll just move on to another great i18n library at that time.

If you find a bug or have any questions, please comment on GitHub or this post.

Thank you for reading all the way through!