use-formatted-message

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>
  );
}