Currency Manager

A flexible set of components for managing currency display and selection. Users provide exchange rates relative to a fixed base currency, and the component handles fetching currency names and performing conversions.

Usage

Loading currencies...

currency-manager.tsx

import { CurrencyDisplay, CurrencyProvider, CurrencySelector } from "@/components/currency-manager"

export default function CurrencyManagerPreview() {

  function ShoppingCartLayout() {
    return (
      <div className="max-w-md mx-auto space-y-4 p-4">
        <div className="flex items-center justify-between border-b pb-3">
          <h3 className="font-semibold">Cart Total</h3>
          <CurrencySelector />
        </div>

        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Laptop</span>
            <CurrencyDisplay value={1999} />
          </div>
          <div className="flex justify-between text-sm">
            <span>Keyboard</span>
            <CurrencyDisplay value={79} />
          </div>
        </div>

        <div className="border-t pt-3">
          <div className="flex justify-between items-center">
            <span className="font-bold">Total:</span>
            <CurrencyDisplay
              value={2078}
              className="text-lg font-bold text-green-600 dark:text-green-400"
            />
          </div>
        </div>
      </div>
    )
  }

  const previewLiveRateFetcher = async (): Promise<Record<string, number>> => {
    const apiKey = process.env.NEXT_PUBLIC_EXCHANGERATE_API_KEY;
    const apiUrl = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/USD`;
    try {
      const response = await fetch(apiUrl);
      if (!response.ok) {
        console.error(`Preview API request failed: ${response.status}`);
        return { USD: 1.0 };
      }
      const data = await response.json();
      if (data.result === "success" && data.base_code === "USD") {
        return data.conversion_rates;
      }
      console.error("Preview API returned non-success or wrong base code");
      return { USD: 1.0 };
    } catch (error) {
      console.error("Error in previewLiveRateFetcher:", error);
      return { USD: 1.0 };
    }
  };
  return (
    <div className='-mt-6!'>
      <CurrencyProvider
        fixedBaseCurrencyCode="USD"
        fetchRatesFunction={previewLiveRateFetcher}
        defaultSelectedCurrencyCode="INR"
        refetchIntervalMs={900000}
      >
        <ShoppingCartLayout />
      </CurrencyProvider>
    </div>
  )
}

Installation

Install the Currency Manager component using your preferred package manager.

npx shadcn@latest add https://rigidui.com/r/currency-manager.json

Features

The Currency Manager component is packed with powerful features designed to provide an exceptional user experience.

Real-time Currency Conversion

Convert monetary values between 180+ currencies with live exchange rates or your custom rates.

Smart Caching & Persistence

Automatically caches exchange rates and currency data for faster loading and offline resilience.

Flexible Rate Sources

Use static rates, live API data, or your custom rate fetching function with configurable refresh intervals.

Global Currency Support

Supports 180+ currencies with proper symbols, names, and locale-aware formatting for international use.

Production Ready

SSR-safe, TypeScript support, error handling, fallback mechanisms, and optimized performance.

Smart Refresh Logic

Intelligent rate refreshing that only fetches when needed, respecting your specified intervals.

Props

CurrencyProvider

Prop	Type	Default
`children`	`React.ReactNode`	-
`fixedBaseCurrencyCode`	`string`	-
`initialRates?`	`Record<string, number>`	`{}`
`fetchRatesFunction?`	`() => Promise<Record<string, number>>`	-
`refetchIntervalMs?`	`number`	-
`defaultSelectedCurrencyCode?`	`string`	`"INR"`
`loaderComponent?`	`ComponentType`	`Internal <Loader /> icon`

CurrencySelector

Prop	Type	Default
`className?`	`string`	-

CurrencyDisplay

Prop	Type	Default
`value`	`number`	-
`sourceCurrency?`	`string`	`fixedBaseCurrencyCode` from Provider
`className?`	`string`	-