Отображение названий и символов валют

Проблема

Приложению необходимо ссылаться на валюту, например, 'USD'. Просто отображать этот код неинформативно. Отображение полного названия, например, 'доллар США', лучше, но это название также нужно перевести ('доллар США', 'Dollar américain'). Кроме того, правильный символ ($, US$, CA$) может быть неоднозначным без контекста.

Решение

Используйте компонент FormattedNumber из react-intl с опцией currencyDisplay. Это позволяет отображать валюту в виде символа (по умолчанию), полного локализованного названия или кода ISO, при этом форматирование будет корректным для текущей локали.

Шаги

1. Создайте клиентский компонент для отображения валюты

Компонент FormattedNumber должен использоваться внутри клиентского компонента. Создайте файл app/components/LocalizedCurrency.tsx, который принимает опцию currencyDisplay в качестве свойства, чтобы сделать его многоразовым.

// app/components/LocalizedCurrency.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  value: number;
  currency: string;
  displayAs: 'symbol' | 'name' | 'code';
};

export default function LocalizedCurrency({
  value,
  currency,
  displayAs,
}: Props) {
  return (
    <FormattedNumber
      value={value}
      style="currency"
      currency={currency}
      currencyDisplay={displayAs}
    />
  );
}

Теперь этот компонент принимает свойство displayAs, которое напрямую управляет опцией currencyDisplay.

2. Используйте компонент на странице

Теперь вы можете использовать этот компонент на странице, чтобы отображать различные форматы валют, изменяя свойство displayAs.

// app/[lang]/page.tsx
import LocalizedCurrency from '@/app/components/LocalizedCurrency';

export default function Home() {
  const price = 1250.75;
  const currency = 'USD';

  return (
    <div>
      <h1>Опции отображения валюты</h1>
      <p>
        По умолчанию (символ):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Полное название (name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        Код ISO (code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

При посещении /en вы увидите "1,250.75 US dollars" для опции 'name'. При посещении /ru та же строка будет отображаться как "1 250,75 долларов США", показывая, что название валюты было переведено и отформатировано корректно.