react-html-i18n

Neat, it’s ICU Message Format with full HTML and React element support.

<Message
  values={{ title: "It worked! Try editing this code." }}
  string="<h2>{title}</h2>"
/>

<Message
  values={{ title: "It worked! Try editing this code." }}
  string="<h2>{title}</h2>"
/>

It worked! Try editing this code.

Values can be React elements, even interactive ones with state!

<Message
  values={{ button: <CounterButton /> }}
  string="Like this: {button} …or how about another? {button}"
/>

<Message
  values={{ button: <CounterButton /> }}
  string="Like this: {button} …or how about another? {button}"
/>

Like this: …or how about another?

Tag replacement? You got it.

<Message
  values={{
    // Customize how tags are rendered:
    hr: () => <hr className="rule" />,
    // Attributes and children become props:
    a: (props) => <FancyLink rel="noopener" {...props} />,
    // Define custom tags:
    important: ({ children }) =>
      <h2 className="important">👉 {children} 👈</h2>,
    // Substitution works in any part of the HTML string:
    url: "https://bailproject.org/",
  }}
  string={`
    <important>Read this!</important>

    <hr>

    Perhaps my <a href="https://github.com/exogen">other projects</a> would be of interest?

    <hr>

    How about a <a href="{url}">dynamic link</a>?
  `}
/>

<Message
  values={{
    // Customize how tags are rendered:
    hr: () => <hr className="rule" />,
    // Attributes and children become props:
    a: (props) => <FancyLink rel="noopener" {...props} />,
    // Define custom tags:
    important: ({ children }) =>
      <h2 className="important">👉 {children} 👈</h2>,
    // Substitution works in any part of the HTML string:
    url: "https://bailproject.org/",
  }}
  string={`
    <important>Read this!</important>
    <hr>
    Perhaps my <a href="https://github.com/exogen">other projects</a> would be of interest?
    <hr>
    How about a <a href="{url}">dynamic link</a>?
  `}
/>

👉 Read this! 👈

Perhaps my other projects would be of interest?

How about a dynamic link?

Here’s an example of a complex message from the ICU docs. You can define completely custom formatters, or import the built-ins defined by the ICU Message Format spec, like: date, time, number, select, plural, and selectordinal.

<Message
  // Try changing these values.
  values={{
    host: "Alex",
    guest: "Sam",
    gender_of_host: "other",
    num_guests: 2,
  }}
  string={` 
    {gender_of_host, select, 
      female {
        {num_guests, plural, offset:1 
          =0 {{host} does not give a party.}
          =1 {{host} invites {guest} to her party.}
          =2 {{host} invites {guest} and one other person to her party.}
          other {{host} invites {guest} and # other people to her party.}
        }
      }
      male {
        {num_guests, plural, offset:1 
          =0 {{host} does not give a party.}
          =1 {{host} invites {guest} to his party.}
          =2 {{host} invites {guest} and one other person to his party.}
          other {{host} invites {guest} and # other people to his party.}
        }
      }
      other {
        {num_guests, plural, offset:1 
          =0 {{host} does not give a party.}
          =1 {{host} invites {guest} to their party.}
          =2 {{host} invites {guest} and one other person to their party.}
          other {{host} invites {guest} and # other people to their party.}
        }
      }
    }
  `}
/>

<Message
  // Try changing these values.
  values={{
    host: "Alex",
    guest: "Sam",
    gender_of_host: "other",
    num_guests: 2,
  }}
  string={` 
    {gender_of_host, select, 
      female {
        {num_guests, plural, offset:1 
          =0 {{host} does not give a party.}
          =1 {{host} invites {guest} to her party.}
          =2 {{host} invites {guest} and one other person to her party.}
          other {{host} invites {guest} and # other people to her party.}
        }
      }
      male {
        {num_guests, plural, offset:1 
          =0 {{host} does not give a party.}
          =1 {{host} invites {guest} to his party.}
          =2 {{host} invites {guest} and one other person to his party.}
          other {{host} invites {guest} and # other people to his party.}
        }
      }
      other {
        {num_guests, plural, offset:1 
          =0 {{host} does not give a party.}
          =1 {{host} invites {guest} to their party.}
          =2 {{host} invites {guest} and one other person to their party.}
          other {{host} invites {guest} and # other people to their party.}
        }
      }
    }
  `}
/>

Alex invites Sam and one other person to their party.