Skip to content

Latest commit

 

History

History
36 lines (31 loc) · 930 Bytes

react-i18next.md

File metadata and controls

36 lines (31 loc) · 930 Bytes
Raw

react-i18next

Be careful of Prettier inserting {' '} when using <Trans/>

<Trans/> uses tagged strings like '<0>first node</0> second node <2>third node</2>' to translate content like <b>bold</b> unbolded <i>italicized</i>.

Prettier formats long blocks of text in HTML by inserting {' '}, which is a fairly standard way of adding spaces between nodes in React. However, this added space is also treated as a node by <Trans/>.

Thus, the following are not equivalent, even though Prettier may silently format the first into the second:

/*
  <0/> is <b>bold</b>
  <1/> is ' unbolded '
  <2/> is <i>italicized</i>
 */
<Trans>
  <span>
    <b>bold</b> unbolded <i>italicized</i>
  </span>
</Trans>
/*
  <0/> is <b>bold</b>
  <1/> is ' '
  <2/> is 'unbolded'
  <3/> is ' '
  <4/> is <i>italicized</i>
 */
<Trans>
  <span>
    <b>bold</b>
    {' '}unbolded{' '}
    <i>italicized</i>
  </span>
</Trans>