grig v0.1.4

grig：轻量易用的 i18n 库，含 TS 智能提示。
grig: a lightweight and easy-to-use i18n library, with TS smart prompts

• 直接使用 Use as a formatter
• React
  • 1.创建 grig 实例 (Create a grig Instance)
  • 2.在任意组件中使用 (Use it anywhere)
  • 3.切换语言 (Switch the lang)
  • 4.用 GrigProvider 包裹 App 刷新 DOM (Refresh DOM by Wrap App with GrigProvider)
• Vue3
  • 1.创建 grig 实例 (Create a grig Instance)
  • 2.在任意组件中使用 (Use it anywhere)
  • 3.切换语言 (Switch the lang)
• 通用用法 General Instance Usage
  • 1.创建 grig 实例 (Create a grig Instance)
  • 2.在任意组件中使用 (Use it anywhere)
  • 3.切换语言 (Switch the lang)
  • 4.通过 key 刷新 DOM (Refresh DOM by key)
• 代码示例 Demos
• 安装 Installation

直接使用 Use as a formatter

import { grig } from "grig";
const message = {
    name: "姓名",
    form: { status: "状态" },
    welcome: "欢迎来到{city}！",
    own: (count: number) => `我有${count}个苹果`,
} as const;
const t = grig(message);
console.log(t("name")); // 姓名
console.log(t("form.status")); // 状态
console.log(t("welcome", { city: "上海" })); // 欢迎来到上海！
console.log(t("own", 2)); //我有2个苹果

React

1.创建 grig 实例 (Create a grig Instance)

//./lang/init
import { createGrigReact } from "grig";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, useGrigContext, useMessages, GrigProvider,getLang } =
    createGrigReact({ lang: "zh", fallbackLang: "en" }, global_messages);

2.在任意组件中使用 (Use it anywhere)

import { useState } from "react";
import { useMessages } from "../lang/init";
export function Content() {
    const t = useMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
    return (
        <div className="content card">
            <div>child: Content.tsx</div>
            <span>{t("g_welcome")}</span>
            <span>{t("world")}</span>
        </div>
    );
}

3.切换语言 (Switch the lang)

import { useGrigContext } from "../lang/init";
export default function SwitchLang() {
    const { lang, setLang } = useGrigContext();
    const t = tMessages({
        zh: { lang: "中文" },
        en: { lang: "English" },
    });
    return (
        <div className="lang-switch card">
            <div>child: SwitchLang.tsx</div>
            <button
                onClick={() => {
                    setLang(lang === "en" ? "zh" : "en");
                }}
            >
                {lang} {t("lang")}
            </button>
        </div>
    );
}

4.用 GrigProvider 包裹 App 刷新 DOM (Refresh DOM by Wrap App with GrigProvider)

import "./app.css";
import SwitchLang from "./components/SwitchLang";
import Content from "./components/Content";
import { useEffect, useState } from "react";
import { GrigProvider } from "./lang/init";

export function App() {
    return (
        <GrigProvider>
            <div className="app card">
                <div>app.tsx</div>
                <SwitchLang />
                <Content />
            </div>
        </GrigProvider>
    );
}

Vue3

1.创建 grig 实例 (Create a grig Instance)

//./lang/init
import { createGrigVue } from "grig";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, lang } = createGrigVue(
    { lang: "zh", fallbackLang: "en" },
    global_messages
);

2.在任意组件中使用 (Use it anywhere)

<template>
    <div className="content card">
        <div>child: Content.tsx</div>
        <span>{{ t("g_welcome") }}</span>
        <span>{{ t("world") }}</span>
    </div>
</template>
<script setup lang="ts">
    import { tMessages } from "../lang/init";
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
</script>

3.切换语言 (Switch the lang)

<template>
    <div class="lang-switch card">
        <div>child: langSwitch.vue</div>
        <button @click="handleToggle">{{ t("lang") }} {{ lang }}</button>
    </div>
</template>
<script setup lang="ts">
import { lang, tMessages } from "../lang";

const handleToggle = () => {
    if (lang.value == "zh") {
        lang.value = "en";
    } else {
        lang.value = "zh";
    }
};
const t = tMessages({
    zh: {
        lang: "中文",
    },
    en: {
        lang: "English",
    },
});
</script>

通用用法 General Instance Usage

1.创建 grig 实例 (Create a grig Instance)

//./lang/init
import { createGrig } from "grig";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const {
    tMessages,
    addLangChangeCallback,
    removeLangChangeCallback,
    getLang,
    setLang,
} = createGrig({ lang: "zh", fallbackLang: "en" }, global_messages);

2.在任意组件中使用 (Use it anywhere)

import { useState } from "react";
import { tMessages } from "../lang/init";
export function Content() {
    const t = tMessages({
        zh: { world: "世界" },
        en: { world: "World" },
    });
    return (
        <div className="content card">
            <div>child: Content.tsx</div>
            <span>{t("g_welcome")}</span>
            <span>{t("world")}</span>
        </div>
    );
}

3.切换语言 (Switch the lang)

import { getLang, setLang, tMessages } from "../lang/init";
export default function SwitchLang() {
    const t = tMessages({
        zh: { lang: "中文" },
        en: { lang: "English" },
    });
    return (
        <div className="lang-switch card">
            <div>child: SwitchLang.tsx</div>
            <button
                onClick={() => {
                    setLang(getLang() === "en" ? "zh" : "en");
                }}
            >
                {getLang()} {t("lang")}
            </button>
        </div>
    );
}

4.通过 key 刷新 DOM (Refresh DOM by key)

import "./app.css";
import SwitchLang from "./components/SwitchLang";
import Content from "./components/Content";
import { useEffect, useState } from "react";
import {
    addLangChangeCallback,
    getLang,
    removeLangChangeCallback,
} from "./lang/init";

export function App() {
    const [lang, setLang] = useState(getLang());
    useEffect(() => {
        addLangChangeCallback("langChange", (_lang) => {
            setLang(_lang);
        });
        return () => {
            removeLangChangeCallback("langChange");
        };
    }, []);

    return (
        <>
            <div className="app card" key={lang}>
                <div>app.tsx</div>
                <SwitchLang />
                <Content />
            </div>
        </>
    );
}

代码示例 Demos

npx degit https://github.com/leafio/grig/examples grig-examples

安装 Installation

npm install grig