This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// HomePage.tsx | |
import React from "react"; | |
import { useLocaleStrings } from "./StringsContext"; | |
export default function HomePage(): React.ReactElement { | |
const { getString } = useLocaleStrings(); | |
return ( | |
<div> | |
<h1>Home</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// StringsContext.tsx | |
+ import has from "lodash.has"; | |
+ import get from "lodash.get"; | |
export function useLocaleStrings() { | |
const strings = useStringsContext(); | |
return { | |
getString(key: string): string { | |
- if (key in strings) { | |
+ if (has(strings, key)) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// StringsContext.tsx | |
export function useStringsContext(): Record<string, any> { | |
return React.useContext(StringsContext); | |
} | |
export interface UseLocaleStringsReturn { | |
getString(key: string): string; | |
} | |
export function useLocaleStrings() { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// index.tsx | |
import HomePage from "./HomePage"; | |
import AboutPage from "./AboutPage"; | |
import Nav from "./Nav"; | |
+ import strings from "./strings.yaml"; | |
+ import { StringsContextProvider } from "./StringsContext"; | |
function App() { | |
return ( | |
+ <StringsContextProvider data={strings}> | |
<div style={{ maxWidth: "500px" }}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// vite.config.js | |
+import yaml from "@rollup/plugin-yaml"; | |
+ | |
/** | |
* @type {import('vite').UserConfig} | |
*/ | |
const config = { | |
root: "./src", | |
+ plugins: [yaml()], | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
homePageTitle: Home | |
aboutPageTitle: About | |
homePageContent: | |
para1: | | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, eos | |
animi. Corporis harum quaerat dicta possimus illum aut unde laborum | |
excepturi suscipit quibusdam perspiciatis dolorum alias, exercitationem | |
similique illo? Distinctio. | |
para2: | | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// strings.yaml.d.ts | |
declare const strings: Record<string, string>; | |
export default strings; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// StringsContext.tsx | |
import { createContext } from "react"; | |
// initialize the context | |
const StringsContext = createContext({}); | |
// props for StringsContextProvider | |
export interface StringsContextProviderProps { | |
data: Record<string, any>; | |
} | |
// a wrapper for `StringsContext.Provider` for better API | |
export function StringsContextProvider( |