String templating

format-message.tsx

interface FormattedMessageProps {
  message: string,
  values?: { [key: string]: any; };
}

export const formatMessage = ({ message, values = {} }: FormattedMessageProps) => {
  const chunks = message.split(/({[^}]+})/g);
  const formattedMessage = chunks.map(chunk => {
    if (chunk.startsWith("{") && chunk.endsWith("}")) {
      const key = chunk.slice(1,-1);

      if (values.hasOwnProperty(key)) {
        return values[key];
      }
    }

    return chunk;
  });

  return formattedMessage.join("");
};

export const FormattedMessage = ({ message, values = {} }: FormattedMessageProps) => {
  const chunks = message.split(/({[^}]+})/g);
  const formattedMessage = chunks.map((chunk, index) => {
    if (chunk.startsWith("{") && chunk.endsWith("}")) {
      const key = chunk.slice(1,-1);

      if (values.hasOwnProperty(key)) {
        return <React.Fragment key={index}>{values[key]}</React.Fragment>;
      }
    }

    return <React.Fragment key={index}>{chunk}</React.Fragment>;
  });

  return <>{formattedMessage}</>;
};