xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: LangProvider and useLang

This commit is contained in:
DIYgod 2023-05-06 22:42:19 +01:00
parent 87d03ba429
commit cc56cacb09
No known key found for this signature in database
5 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/layout.tsx
View File

@ -29,12 +29,12 @@ export default function RootLayout({
}: {
children: React.ReactNode
}) {
const lng = useAcceptLang()
const lang = useAcceptLang()
return (
<html lang={lng} dir={dir(lng)}>
<html lang={lang} dir={dir(lang)}>
<body>
<Providers>{children}</Providers>
<Providers lang={lang}>{children}</Providers>
<Toaster />
</body>
</html>

11
src/app/providers.tsx
View File

@ -22,6 +22,7 @@ import { APP_NAME } from "~/lib/env"
import { toGateway } from "~/lib/ipfs-parser"
import { createIDBPersister } from "~/lib/persister.client"
import { urlComposer } from "~/lib/url-composer"
import { LangProvider } from "~/providers/LangProvider"
const wagmiClient = createClient(getDefaultClientConfig({ appName: APP_NAME }))
@ -34,7 +35,13 @@ const colorScheme: NotificationModalColorScheme = {
border: `var(--border-color)`,
}
export default function Providers({ children }: { children: React.ReactNode }) {
export default function Providers({
children,
lang,
}: {
children: React.ReactNode
lang: string
}) {
useDarkMode()
useMobileLayout()
@ -77,7 +84,7 @@ export default function Providers({ children }: { children: React.ReactNode }) {
<NextNProgress
options={{ easing: "linear", speed: 500, trickleSpeed: 100 }}
/>
{children}
<LangProvider lang={lang}>{children}</LangProvider>
<NotificationModal colorScheme={colorScheme} />
</ConnectKitProvider>
</PersistQueryClientProvider>

13
src/hooks/useLang.ts Normal file
View File

@ -0,0 +1,13 @@
import { useContext } from "react"
import { LangContext, LangContextType } from "~/providers/LangProvider"
export function useLang(): LangContextType {
const context = useContext(LangContext)
if (!context) {
throw new Error("useLang must be used within a LangProvider")
}
return context
}

22
src/lib/i18n/client.ts
View File

@ -3,13 +3,14 @@
import i18next from "i18next"
import LanguageDetector from "i18next-browser-languagedetector"
import resourcesToBackend from "i18next-resources-to-backend"
import { useEffect, useState } from "react"
import {
initReactI18next,
useTranslation as useTranslationOrg,
} from "react-i18next"
import { fallbackLng, getOptions } from "./settings"
import { useLang } from "~/hooks/useLang"
import { getOptions } from "./settings"
i18next
.use(initReactI18next)
@ -29,16 +30,9 @@ i18next
})
export function useTranslation(ns: string) {
const [value, setValue] = useState({
t: i18next.getFixedT(fallbackLng, ns),
})
const { t } = useTranslationOrg(ns)
useEffect(() => {
setValue({
t,
})
}, [t])
return value
const { lang } = useLang()
if (i18next.resolvedLanguage !== lang) {
i18next.changeLanguage(lang)
}
return useTranslationOrg(ns)
}

18
src/providers/LangProvider.tsx Normal file
View File

@ -0,0 +1,18 @@
import { ReactNode, createContext } from "react"
export interface LangContextType {
lang: string
}
export const LangContext = createContext<LangContextType | undefined>(undefined)
interface LangProviderProps {
children: ReactNode
lang: string
}
export function LangProvider({ children, lang }: LangProviderProps) {
return (
<LangContext.Provider value={{ lang }}>{children}</LangContext.Provider>
)
}