StringContext.tsx.diff

// 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();
  return {
-   getString(key: string): string {
+   getString(key: string, variables: any = {}): string {
      if (has(strings, key)) {
+       const str = get(strings, key);

-       return get(strings, key);
+       return mustache.render(str, variables);
      }
      throw new Error(`Strings data does not have a definition for: "${key}"`);
    }
  };
}

export interface LocaleStringProps extends HTMLAttributes<any> {
  strKey: string;
  as?: keyof JSX.IntrinsicElements;
+ variables?: any;
}

export function LocaleString(props: LocaleStringProps): React.ReactElement {
- const { strKey, as, ...rest } = props;
+ const { strKey, as, variables, ...rest } = props;
  const { getString } = useLocaleStrings();
  const Component = as || "span";
  
- return <Component {...rest}>{getString(strKey)}</Component>;
+ return <Component {...rest}>{getString(strKey, variables)}</Component>;
}