管理画面フレームワーク「AdminLTE 3 React」のカスタマイズ方法

Reactで動く管理画面フレームワーク「AdminLTE 3」を使ってみたので、
備忘録も兼ねてカスタマイズ方法（ページ追加とか）を書いてみる。

導入直後はこんな感じ

導入方法

GitHub から git clone する。

git clone https://github.com/erdkse/adminlte-3-react.git
cd adminlte-3-react
npm install
npm run start

カスタマイズしてみる

ページ追加

1. src/pages/Blank.tsx がテンプレとして使えそうなので、コピーして Hoge.tsx にする

src/pages/Hoge.tsx

・・・
- const Blank = () => {
+ const Hoge = () => {
・・・
- export default Blank;
+ export default Blank;

2. src/App.tsx にルートを追加する。
   追加すると http://localhost:3000/hoge でアクセスできるようになる。

src/App.tsx

・・・
  import Blank from '@pages/Blank';
+ import Hoge from '@pages/Hoge';
・・・
  <Route path="/" element={<PrivateRoute />}>
    <Route path="/" element={<Main />}>
+     <Route path="/hoge" element={<Hoge />} />
      <Route path="/sub-menu-2" element={<Blank />} />

サイドバーへボタン追加

1. サイドバーにボタンを追加する場合は src/modules/main/menu-sidebar/MenuSidebar.tsx を編集する

src/modules/main/menu-sidebar/MenuSidebar.tsx

・・・
  {
    name: i18n.t('menusidebar.label.blank'),
    icon: 'fas fa-wrench nav-icon',
    path: '/blank'
  },
+ {
+   name: 'Hoge',
+   icon: 'fas fa-wrench nav-icon',
+   path: '/hoge'
+ },

2. なお上記3行目のように i18next での言語切り替えにも対応している。

「Hoge」を対応させたい場合は name: i18n.t('menusidebar.label.hoge'), にして、
src/locales/○○○/translation.json に追記すればOK。

src/locales/en/translation.json

  "menusidebar": {
    "label": {
      "dashboard": "Dashboard",
+     "hoge": "Hoge",

3. アイコンはFont Awesomeが使われているので、
   ここから検索して、好きな物に変えることができる。
   ※ただし無料版のアイコンのみ

src/modules/main/menu-sidebar/MenuSidebar.tsx

・・・
  {
    name: 'Hoge',
-   icon: 'fas fa-wrench nav-icon',
+   icon: 'fas fa-radiation nav-icon',
    path: '/hoge'
  },

言語リストに日本語を追加

翻訳データの作成が地獄（100単語弱）

1. src/locales/en をフォルダ毎コピーして、src/locales/ja にする
2. src/locales/ja/translation.json を日本語に翻訳する
   ここでは例として、日本語選択時に「Hoge→ほげ」と表示されるようにする

src/locales/ja/translation.json

-  "hoge": "Hoge",
+  "hoge": "ほげ",

3. src/utils/i18n.ts に日本語を追加する

src/utils/i18n.ts

  import translationEN from '../locales/en/translation.json';
+ import translationJA from '../locales/ja/translation.json';
  import translationTR from '../locales/tr/translation.json';
  ・・・
  en: {
    translation: translationEN
  },
+ ja: {
+   translation: translationJA
+ },
  tr: {

初期値を日本語にしたい場合はこうする

src/utils/i18n.ts

  i18n
  ・・・
-     lng: 'en',
+     lng: 'ja',

4. src/modules/main/header/languages-dropdown/LanguagesDropdown.tsx を編集してリストに追加する

src/modules/main/header/languages-dropdown/LanguagesDropdown.tsx

  {
    key: 'en',
    icon: 'flag-icon-us',
    label: 'header.language.english'
  },
+ {
+   key: 'ja',
+   icon: 'flag-icon-jp',
+   label: 'header.language.japanese'
+ },

5. ラベルを追加する

src/locales/ja/translation.json

   "english": "English",
+  "japanese": "日本語",

言語リストに日本語が追加された

随時追加予定