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

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!