React tagged template

templates.ts

interface HighlightTextConfig {
  highlightStyle: React.CSSProperties;
  baseStyle: React.CSSProperties;
}

export const highlightText = (config?: HighlightTextConfig) => (
  literals: TemplateStringsArray,
  ...substitutions: string[]
) => (
  <div style={config?.baseStyle ?? {}}>
    {literals.map((literal, i) => (
      <>
        {literal}
        <span style={config?.highlightStyle ?? {}}>{substitutions[i]}</span>
      </>
    ))}
  </div>
);

// usage 
const action = "send a message";
const user = "Pingpong";
const description = highlightText(
  styles.text,
  styles.highlight
)`You’re going to ${action} to ${user}. Please confirm?`;

// in the render method
<Text>{description}</Text>;

// hof 
const description = (user, action, styles) => highlightText(
  styles.text,
  styles.highlight
)`You’re going to ${action} to ${user}. Please confirm?`;

// in the render method
<Text>{description('Pingpong', 'Send a message', styles)}</Text>;