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

Проблема

Приложению нужно ссылаться на валюту, например, '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>Currency Display Options</h1>
      <p>
        Default (symbol):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Full name (name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        ISO code (code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

Если перейти по адресу /en, вы увидите «1 250,75 долларов США» для опции 'name'. Если перейти по адресу /es, та же строка отобразится как «1 250,75 долларов США», что показывает, что название валюты переведено и отформатировано корректно.