A smart, location-aware currency symbol component that automatically detects and displays the appropriate currency symbol based on your visitor's location. Perfect for creating region-specific pricing displays, payment forms, or any financial interface that needs to adapt to your global audience.

✨ Key Features

• Automatic Location Detection: Seamlessly detects visitor's location and currency
• Smart Currency Mapping: Extensive built-in currency code to symbol mapping
• Fallback System: Configurable loading and default symbols for reliable display
• Real-time Adaptation: Updates automatically when visitors from different regions access your site
• Zero Configuration Required: Works out of the box with smart defaults
• Fully Customizable: Complete control over appearance and fallback behavior

🔧 How It Works

1. The component uses ipapi.co service to detect visitor's location and currency code, i.e. USD
2. It maps the detected currency code to corresponding symbol using the configured currency symbols list, i.e. USD -> $
3. Displays a loading symbol during detection process
4. Falls back to default symbol if currency code isn't found in the mapping
5. Updates automatically if location/currency changes

💡 Example

Here's how to set up a simple global currency display that shows:

• £ for visitors from the United Kingdom
• € for visitors from European Union countries
• $ for visitors from all other countries

Configuration steps:

1. Configure the default symbol as $ (this will be used for any unmatched regions)
2. In the currency mapping settings:
   • Map GBP → £
   • Map EUR → €
   • Clear all other currency mappings (or leave them empty)

That's all! The component will now automatically display the appropriate currency symbol based on your visitor's location.

🎨 Styling Options

• Typography: Font family, size, weight, spacing, and alignment
• Colors: Custom color picker for symbol appearance
• Symbols: Configurable loading and default currency symbols
• Currency Mapping: Extensive list of currency code to symbol mappings

This component brings automatic currency localization to your Framer projects without any coding required, while maintaining full customization flexibility through the property controls. Perfect for creating globally adaptive financial interfaces and pricing displays.