USE - MINI 18 NはI 18 Nのためのシンプルで最小限の反応フックライブラリです

私は個人的な開発者のWebアプリを作る.
私の母国語は日本語です.しかし、私はそれが世界中の人々によって使用されたいので、私のアプリの言語セットに英語を追加しています.
(私は本当に多くの言語をサポートしたいと思っていますが、まだ仕事をする時間がなかったので、仕事をすることができませんでした)
例えば、私はこれをWebアプリを作成しています.
Dig Music - Dig Music is a web application for discovering new music
それはWebアプリのi 18 nサポートになると、私は使用について考えていたreact-i18next or react-intl(It seems to be included in a monorepo now called FormatJS) i 18 nサポート.
Rei - I 18 NextとRespontは、I 18 Nのための非常に良い反応ライブラリの両方です、そして、私は前に彼らを利用しました.私はそれらを使用して、彼らは非常によく動作します.
しかし、私のWebアプリケーションは非常に小さく、Rei - I 18 Nextを設定して、I 18をサポートするためにINTLを反応させます.
私はそれが実装されて簡単に使用しても、いくつかの機能があった場合でも、簡単にI 18 Nライブラリを使用したい.
私は少しあたりを見回しましたが、そのような図書館のようではありませんでした.
私はまた、タイプスクリプトを使用して反応フックライブラリを作成する方法について知りたいと思いました.
use-mini18n - A simple and minimalistic React hook library for i18n

このライブラリはとても簡単です.
簡単な例です.
( 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
);

開発者がUS - Mini 18 nでできる唯一のことは、このサンプルコードで説明されていることです.
いくつかのマイナーオプションが利用可能です.を参照してくださいREADME and examples .
また、use - mini 18 nは、localstorageでユーザーの好ましい言語を保存するためにデフォルトです.
私が開発した言語の設定から開発者として取得したいので、私はこのように設計した.
そうしたくないなら、localstorageを使わないオプションがあります.

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

それはUS - MINI 18 Nへの私の導入の終わりです.
私はそれが簡単にi 18 nに対処するために作成し、反応でWebアプリケーションの作成のために持っている必要があります.
私はUS - MINI 18 Nのミニマリスト世界観に満足です.そのライブラリはすべてをカバーしていないが、それは大丈夫です.
US - MINI 18 Nがそれをカバーしないと感じるならば、私はちょうどその時もう一つの大きなi 18 nライブラリに移ります.
あなたがバグを見つけるか、どんな質問をするならば、Githubまたはこのポストについてコメントしてください.
すべての方法を読んでいただきありがとうございます!