Currency Chooser

A headless component for managing currency selection in the storefront. This component allows users to view and change the active currency for their shopping experience.

Features

• Display available currencies
• Change active currency
• Persist currency selection in localStorage
• Refresh the page to apply currency changes
• Automatically select the default currency based on the active channel

Installation

yarn add @haus-storefront-react/currency-chooser

Basic Usage

import { CurrencyChooser } from '@haus-storefront-react/currency-chooser';

export default function App() {
  return (
    <CurrencyChooser.Root>
      <CurrencyChooser.Trigger />
      <CurrencyChooser.Options />
    </CurrencyChooser.Root>
  );
}

Advanced Usage

import { CurrencyChooser } from '@haus-storefront-react/currency-chooser';

export default function CustomCurrencySelector() {
  return (
    <CurrencyChooser.Root>
      {({ selectedCurrency, availableCurrencyCodes, isLoading, handleValueChangeAndReload }) => (
        <div className="currency-selector">
          {isLoading ? (
            <p>Loading currencies...</p>
          ) : (
            <>
              <span>Current currency: {selectedCurrency}</span>
              <select 
                value={selectedCurrency} 
                onChange={(e) => handleValueChangeAndReload(e.target.value)}
              >
                {availableCurrencyCodes.map((code) => (
                  <option key={code} value={code}>
                    {code}
                  </option>
                ))}
              </select>
            </>
          )}
        </div>
      )}
    </CurrencyChooser.Root>
  );
}

Component API

CurrencyChooser.Root

The root component that provides context to all other components.

<CurrencyChooser.Root>
  {/* Other CurrencyChooser components */}
</CurrencyChooser.Root>

CurrencyChooser.Select

A component that renders a complete select element for choosing a currency.

<CurrencyChooser.Select />

CurrencyChooser.Trigger

A button component that displays the current currency.

<CurrencyChooser.Trigger />

CurrencyChooser.Options

A container for currency options.

<CurrencyChooser.Options />

CurrencyChooser.Option

An individual currency option.

<CurrencyChooser.Option value="USD" />

CurrencyChooser.Value

A component that displays the currently selected currency.

<CurrencyChooser.Value />

Using with Custom UI Components

You can use the asChild prop to compose with your own UI components:

import { Button } from './your-ui-library';

function CustomCurrencyChooser() {
  return (
    <CurrencyChooser.Root>
      <CurrencyChooser.Trigger asChild>
        <Button variant="outline">
          <CurrencyChooser.Value /> ▼
        </Button>
      </CurrencyChooser.Trigger>
      {/* Rest of your implementation */}
    </CurrencyChooser.Root>
  );
}