use-formatted-message

react-intl formatted message hook with use memo

Install

npm install --save use-formatted-message

API

https://christophehurpeau.github.io/use-formatted-message/

Why use this ?

This hook uses useMemo to avoid recall intl.formatMessage at each render, like FormattedMessage component.

Usage

import { defineMessages } from "react-intl";
import useFormattedMessage from "use-formatted-message";

const messages = defineMessages({
  title: {
    id: "some.key.title",
    defaultMessage: "This is the title content",
  },
  titleWithParams: {
    id: "some.key.titleWithParams",
    defaultMessage: "This is the title content, with {count}",
  },
});

function MyComponent({ count = 1 }) {
  const title = useFormattedMessage(messages.title);
  const titleWithParams = useFormattedMessage(
    messages.titleWithParams,
    { count },
    [count],
  );

  return (
    <div>
      <span title={title}>Hello</span>{" "}
      <span title={titleWithParams}>World</span>
    </div>
  );
}