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!
Top comments (3)
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 :)
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 :)
:) Appreciate it~