DEV Community

Cover image for use-mini18n is a simple and minimalistic React hook library for i18n
Yuki Shindo
Yuki Shindo

Posted on

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

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

use-mini18n - logo image

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!

Discussion (3)

Collapse
dance2die profile image
Sung M. Kim

Nice one, Yuki.

I just started learning react-i18next and felt a little bit heavy.

This looks like an easy way to add i18n in micro/documentation sites :)

Collapse
shinshin86 profile image
Yuki Shindo Author

Thanks for the comment!

I think it would be a good match in the case of creating a micro/documentation site.
If use-mini18n could helpful to you, I'd be happy :)

Collapse
dance2die profile image
Sung M. Kim

:) Appreciate it~