INTL-Greeter

index.js

import React from "react";
import { messages } from "./messages";
import { FormattedMessage, FormattedRelative } from "react-intl";

const Greeter = ({ name }) => {
  const message1 = { name: name };
  const message2 = { name: "Developer A", status: "busy", taskCount: 5 };
  const message3 = { name: "Developer B", status: "busy", taskCount: 1 };
  const message4 = { name: "Developer C", status: "busy", taskCount: 0 };
  const message5 = { name: "Developer E", status: "idle" };
  return (
    <>
      <FormattedMessage {...messages.simpleExample} values={message1} />
      <div>
        <FormattedMessage {...messages.complexExample} values={message2} />
      </div>
      <div>
        <FormattedMessage {...messages.complexExample} values={message3} />
      </div>
      <div>
        <FormattedMessage {...messages.complexExample} values={message4} />
      </div>
      <div>
        <FormattedMessage {...messages.complexExample} values={message5} />
      </div>
      <FormattedMessage {...messages.lastUpdated} />
      <FormattedRelative value={Date.now()} />
    </>
  );
};

export default Greeter;