vkbansal

// 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" }}>

vkbansal

// 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(

vkbansal

// usage in Nav.tsx
import React from "react";
import { Link } from "react-router-dom";

+ import { useLocaleStrings } from "./StringsContext";

export default function Nav(): React.ReactElement {
+ const { getString } = useLocaleStrings();

  return (

vkbansal

// 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)) {

vkbansal

// HomePage.tsx
import React from "react";
import { useLocaleStrings } from "./StringsContext";

export default function HomePage(): React.ReactElement {
  const { getString } = useLocaleStrings();
 
  return (
    <div>
      <h1>Home</h1>

vkbansal

// StringsContext.tsx
export interface LocaleStringProps extends React.HTMLAttributes<any> {
  strKey: string;
  as?: keyof JSX.IntrinsicElements;
}

export function LocaleString(props: LocaleStringProps): React.ReactElement {
  const { strKey, as, ...rest } = props;
  const { getString } = useLocaleStrings();
  const Component = as || "span";

vkbansal

// HomePage.tsx
import React from "react";
- import { useLocaleStrings } from "./StringsContext";
+ import { useLocaleStrings, LocaleString } from "./StringsContext";
export default function HomePage(): React.ReactElement {
  const { getString } = useLocaleStrings();
  return (
    <div>
      <h1>Home</h1>
      <p>{getString("homePageContent.para1")}</p>

vkbansal

// StringsContext.tsx
+ import mustache from "mustache";

export interface UseLocaleStringsReturn {
- getString(key: string): string;
+ getString(key: string, variables?: any): string;
}

export function useLocaleStrings() {
  const strings = useStringsContext();

vkbansal

# strings.yaml
homePageContent:
 para1: |
+ Hello {{name}}
 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: |
+ Hello {{name}}

vkbansal

import React from "react";
import { useLocaleStrings, LocaleString } from "./StringsContext";

export default function HomePage(): React.ReactElement {
  const { getString } = useLocaleStrings();
 
  return (
    <div>
      <h1>Home</h1>
-     <p>{getString("homePageContent.para1")}</p>