# use-formatted-message

> react-intl formatted message hook with use memo

Latest version **6.0.1** (published 2025-09-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install use-formatted-message
pnpm add use-formatted-message
yarn add use-formatted-message
bun add use-formatted-message
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 6.0.1 |
| Published | 2025-09-13 |
| First published | 2020-05-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.18.0 |
| Dependencies | 1 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com) |
| Maintainers | churpeau |

## Links

- npm: https://www.npmjs.com/package/use-formatted-message
- Repository: https://github.com/christophehurpeau/use-react-intl-formatters
- npm.io page: https://npm.io/package/use-formatted-message

## Dependencies (1)

- [use-react-intl-formatters](https://npm.io/package/use-react-intl-formatters.md) 6.0.1

## Recent versions

- 6.0.1 (latest) — 2025-09-13
- 6.0.0 — 2025-09-13
- 5.0.4 — 2023-12-14
- 5.0.3 — 2023-10-18
- 5.0.2 — 2023-09-24
- 5.0.1 — 2023-09-07
- 5.0.0 — 2023-07-30
- 4.1.0 — 2023-03-14
- 4.0.0 — 2023-01-31
- 2.0.0 — 2021-12-18
- 1.0.0 — 2020-05-08
- 0.0.0 — 2020-05-08

## README

<h1 align="center">
  use-formatted-message
</h1>

<p align="center">
  react-intl formatted message hook with use memo
</p>

<p align="center">
  <a href="https://npmjs.org/package/use-formatted-message"><img src="https://img.shields.io/npm/v/use-formatted-message.svg?style=flat-square" alt="npm version"></a>
  <a href="https://npmjs.org/package/use-formatted-message"><img src="https://img.shields.io/npm/dw/use-formatted-message.svg?style=flat-square" alt="npm downloads"></a>
  <a href="https://npmjs.org/package/use-formatted-message"><img src="https://img.shields.io/node/v/use-formatted-message.svg?style=flat-square" alt="node version"></a>
  <a href="https://npmjs.org/package/use-formatted-message"><img src="https://img.shields.io/npm/types/use-formatted-message.svg?style=flat-square" alt="types"></a>
  <a href="https://codecov.io/gh/christophehurpeau/use-react-intl-formatters"><img src="https://img.shields.io/codecov/c/github/christophehurpeau/use-react-intl-formatters/main.svg?style=flat-square"></a>
</p>

## Install

```bash
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

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

---
_Source: https://npm.io/package/use-formatted-message · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._