Skip to main content

​
CurrencySelector

Currency selector dropdown with modal for choosing from available currencies. Displays symbol and currency code (e.g., ”€ EUR”). Responsive with full-screen modal on mobile.

​
Import

import { CurrencySelector } from '@adoptaunabuelo/react-components';

​
Props

​
options
Array<CurrencySelectorOption>
required
Available currency options
​
selectedOption
CurrencySelectorOption
Currently selected currency (defaults to first option)
​
onChange
(option: CurrencySelectorOption) => void
Callback when currency is selected
​
style
React.CSSProperties
Custom styles for the container

​
CurrencySelectorOption

​
currency
string
required
ISO currency code (e.g., “EUR”, “USD”)
​
name
string
required
Full currency name (e.g., “Euro”)
​
symbol
string
required
Currency symbol (e.g., ”€”, ”$“)

​
Usage

<CurrencySelector
  options={[
    { currency: "EUR", name: "Euro", symbol: "€" },
    { currency: "USD", name: "US Dollar", symbol: "$" },
    { currency: "GBP", name: "British Pound", symbol: "£" }
  ]}
  selectedOption={{ currency: "EUR", name: "Euro", symbol: "€" }}
  onChange={(option) => setCurrency(option.currency)}
/>

​
Notes

  • Opens modal on click to select currency
  • Modal is full-screen on mobile (less than 450px width)
  • Shows checkmark icon next to selected currency
  • Displays as “Symbol Code” format (e.g., ”€ EUR”)
  • Auto-selects first option if no selectedOption provided
  • Closes modal automatically when selection is made

Build docs developers (and LLMs) love

Get started for freeTalk to us