Function ComponentUsingMacro

example/react-icu/src/ComponentUsingMacro.js:13–89

()

/* eslint-disable no-undef, no-sequences */
// prettier-ignore
export function ComponentUsingMacro() {
  const name = 'John Doe';
  const itemsCount1 = 0;
  const itemsCount2 = 1;
  const itemsCount3 = 199;
  const trainersCount = 134567;

  const catchDate = new Date();
  const gender = 'female';


  return (
    <div>
      <hr />
      <p><i>Using babel macro plugin to transpile icu containing nodes into valid Trans component:</i></p>


      <p><i>interpolation:</i></p>
      <Trans>Welcome, { name }!</Trans>
      <br />
      <Trans>Welcome, <strong>{ name }</strong>!</Trans>
      <br />
      <Trans>Trainers: { trainersCount, number }</Trans>
      <br />
      <Trans>Trainers: <strong>{ trainersCount, number }</strong>!</Trans>
      <br />
      <Trans>Caught on { catchDate, date, full }</Trans>
      <br />
      <Trans>Caught on <strong>{ catchDate, date, full }</strong>!</Trans>

      <p><i>select:</i></p>
      <Select
        switch={gender}
        male="He avoids bugs."
        female="She avoids bugs."
        other="They avoid bugs."
      />
      <br />
      <Select
        switch={gender}
        male={<Trans><strong>He</strong> avoids bugs.</Trans>}
        female={<Trans><strong>She</strong> avoids bugs.</Trans>}
        other={<Trans><strong>They</strong> avoid bugs.</Trans>}
      />

      <p><i>plurals:</i></p>
      <Plural
        count={itemsCount1}
        $0="There is no item."
        one="There is # item."
        other="There are # items."
      />
      <br />
      <Plural
        count={itemsCount2}
        $0="There is no item."
        one="There is # item."
        other="There are # items."