Skip to main content

Currency Picker

Headless currency picker component for multi-currency e-commerce applications.

Purpose​

This library provides a headless component for managing currency selection. It provides functionality for displaying and changing the active currency while allowing complete UI customization. The component automatically persists currency selection in localStorage and syncs with the active channel's available currencies.

Features​

  • Currency selection and switching
  • Automatic currency persistence in localStorage
  • Available currency detection from active channel
  • Render prop pattern for flexible UI composition
  • Headless component architecture

Installation​

npm install @haus-storefront-react/currency-picker

Note: This is not a public package. Contact the Haus Tech Team for access.

API Reference​

CurrencyPicker.Root​

Main container component that provides currency context and state. Must wrap all other CurrencyPicker components.

Props

PropTypeRequiredDefaultDescription
childrenChildrenProps<CurrencyPickerContextValue>No-Render prop function that receives context value, or React children

CurrencyPicker.Trigger​

Trigger component for displaying the current currency and opening the selector. Must be used within CurrencyPicker.Root.

Props

PropTypeRequiredDefaultDescription
asChildbooleanNofalseWhen true, merges props with child component instead of rendering a button
classNamestringNo-CSS class name
styleCSSPropertiesNo-Inline styles
childrenChildrenProps<{ selectedCurrency: string }>No-Render prop function that receives selectedCurrency, or React children
disabledbooleanNo-Disabled state
onClick(event: MouseEvent<HTMLButtonElement>) => voidNo-Click handler

CurrencyPicker.Options​

Options container for currency options. Must be used within CurrencyPicker.Root. Automatically renders currency options if children are not provided.

Props

PropTypeRequiredDefaultDescription
asChildbooleanNofalseWhen true, merges props with child component instead of rendering a div
classNamestringNo-CSS class name
styleCSSPropertiesNo-Inline styles
childrenReactNodeNo-React children (if not provided, renders available currency options)

CurrencyPicker.Option​

Option component for an individual currency option. Must be used within CurrencyPicker.Options.

Props

PropTypeRequiredDefaultDescription
valuestringYes-Currency code value
asChildbooleanNofalseWhen true, merges props with child component instead of rendering a button
classNamestringNo-CSS class name
styleCSSPropertiesNo-Inline styles
childrenReactNodeNo-React children (defaults to currency code if not provided)
disabledbooleanNo-Disabled state
onClick(event: MouseEvent<HTMLButtonElement>) => voidNo-Click handler

CurrencyPicker.Value​

Value component for displaying the currently selected currency. Must be used within CurrencyPicker.Root. Returns null if no currency is selected.

Props

PropTypeRequiredDefaultDescription
asChildbooleanNofalseWhen true, merges props with child component instead of rendering a span
classNamestringNo-CSS class name
styleCSSPropertiesNo-Inline styles
childrenReactNodeNo-React children (defaults to selected currency code if not provided)

useCurrencyPicker​

Hook for managing currency selection. Provides currency state and update function.

Parameters

None.

Returns

Return ValueTypeDescription
currencyCodestring | undefinedThe currency code from the active channel
availableCurrencyCodesstring[]Array of available currency codes from the active channel
isLoadingbooleanLoading state flag from active channel query
errorError | nullError object if active channel query failed
selectedCurrencystring | undefinedCurrently selected currency code
setSelectedCurrency(value: string) => Promise<void>Function to set the selected currency (persists to storage and invalidates queries)

Basic Usage​

Simple Currency Picker​

Design 1: Pill Button Selector

Select Currency

Design 2: Dropdown List

Currency
import { CurrencyPicker } from '@haus-storefront-react/currency-picker'

function Header() {
  return (
    <CurrencyPicker.Root>
      {({ availableCurrencyCodes, setSelectedCurrency }) => (
        <>
          <CurrencyPicker.Options>
            {availableCurrencyCodes.map((code) => (
              <CurrencyPicker.Option
                key={code}
                value={code}
                onClick={() => setSelectedCurrency(code)}
              />
            ))}
          </CurrencyPicker.Options>
        </>
      )}
    </CurrencyPicker.Root>
  )
}

Basic Hook Usage​

import { useCurrencyPicker } from '@haus-storefront-react/currency-picker'

function MyComponent() {
  const { selectedCurrency, availableCurrencyCodes, setSelectedCurrency } =
    useCurrencyPicker()

  return (
    <select
      value={selectedCurrency || ''}
      onChange={(e) => setSelectedCurrency(e.target.value)}
    >
      {availableCurrencyCodes.map((code) => (
        <option key={code} value={code}>
          {code}
        </option>
      ))}
    </select>
  )
}

Advanced Usage​

Using with Custom UI Components​

import { CurrencyPicker } from '@haus-storefront-react/currency-picker'
import { Button } from './your-ui-library'

function CustomCurrencyPicker() {
  return (
    <CurrencyPicker.Root>
      {({ setSelectedCurrency }) => (
        <>
          <CurrencyPicker.Trigger asChild>
            <Button variant='outline'>
              <CurrencyPicker.Value /> ▼
            </Button>
          </CurrencyPicker.Trigger>
          <CurrencyPicker.Options>
            <CurrencyPicker.Option
              value='USD'
              onClick={() => setSelectedCurrency('USD')}
            >
              USD
            </CurrencyPicker.Option>
            <CurrencyPicker.Option
              value='EUR'
              onClick={() => setSelectedCurrency('EUR')}
            >
              EUR
            </CurrencyPicker.Option>
          </CurrencyPicker.Options>
        </>
      )}
    </CurrencyPicker.Root>
  )
}

Custom Currency Picker with State Management​

import { CurrencyPicker } from '@haus-storefront-react/currency-picker'
import { useState } from 'react'

function CurrencyPicker() {
  const [isOpen, setIsOpen] = useState(false)

  const currencyFlags = {
    USD: '🇺🇸',
    EUR: '🇪🇺',
    GBP: '🇬🇧',
    CAD: '🇨🇦',
    AUD: '🇦🇺',
    JPY: '🇯🇵',
    CHF: '🇨🇭',
    SEK: '🇸🇪',
  }

  return (
    <CurrencyPicker.Root>
      {({
        selectedCurrency,
        availableCurrencyCodes,
        setSelectedCurrency,
        isLoading,
      }) => (
        <div className='currency-picker'>
          <button
            className='currency-button'
            onClick={() => setIsOpen(!isOpen)}
            disabled={isLoading}
          >
            <span className='currency-flag'>
              {(selectedCurrency &&
                currencyFlags[
                  selectedCurrency as keyof typeof currencyFlags
                ]) ||
                '💱'}
            </span>
            <span className='currency-code'>{selectedCurrency}</span>
            <span className='dropdown-arrow'>▼</span>
          </button>

          {isOpen && (
            <div className='currency-dropdown'>
              {availableCurrencyCodes.map((currency) => (
                <button
                  key={currency}
                  className={`currency-option ${
                    currency === selectedCurrency ? 'selected' : ''
                  }`}
                  onClick={() => {
                    setSelectedCurrency(currency)
                    setIsOpen(false)
                  }}
                >
                  <span className='currency-flag'>
                    {currencyFlags[currency as keyof typeof currencyFlags] ||
                      '💱'}
                  </span>
                  <span className='currency-code'>{currency}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      )}
    </CurrencyPicker.Root>
  )
}

Made with ❤️ by Haus Tech Team