Auto-localize prices in React with react-currency-localizer-realtime

If you sell to international customers, displaying prices in the visitor's local currency is not a nice-to-have feature, but rather a crucial conversion rate booster. Implementing this, however, often turns into a small project involving IP geolocation, exchange rate fetching, caching, fallbacks, and handling race conditions when the rate call takes longer than rendering.

The react-currency-localizer-realtime library simplifies this process by providing a React hook and component. Drop the library into your project, pass a price, and you're done.

The library utilizes real-time mid-market rates from the AllRatesToday API, which offers 160+ currencies updated every 60 seconds from institutional interbank market data. Here's what you get:

✔️ Real-time mid-market rates without retail markup or hidden spreads

🌍 Automatic detection of the user's currency via IP geolocation (no API key required)

💱 Support for 160+ currencies, including major, minor, exotic, and precious metals

🧠 Intelligent caching - 24-hour localStorage cache for geolocation and 1-hour memory cache for rates

🔀 Three usage patterns - hook, component, or batch conversion

🎯 Manual override to skip geolocation with an explicit currency

📦 Minimal runtime dependencies - only React itself

~4KB gzipped size

🛡️ Graceful fallbacks showing the original price if any errors occur

To use the library, install it via npm and ensure your project is using React 17 or higher. The only peer dependency is React. A free API key can be obtained from allratestoday.com/register.

There are three ways to use the library:

1. The component: The simplest method is to import the LocalizedPrice component and pass the base price, base currency, and API key. Visitors from different countries will see prices displayed in their local currency.

2. The hook: For more control, use the useCurrencyConverter hook to access loading and error states, as well as the converted price and localized currency.

3. Manual override: Override the geolocation by passing an explicit currency if you have a currency switcher in your header.

Unlike Intl.NumberFormat, which only handles formatting, react-currency-localizer-realtime handles both currency conversion and formatting. It addresses common performance issues by caching geolocation data for 24 hours and exchange rates for 1 hour.

This package is perfect for WooCommerce, Shopify, or custom storefronts that need per-visitor pricing without creating separate regional installs. Combine it with the LocalizedPrice component and a currency switcher in the header to cover 95% of international storefront UX in just an afternoon.

For more information, check out the library on npm, get your free API key from allratestoday.com/register, and visit the documentation at allratestoday.com.