npm package: @haus-storefront-react/currency-chooser
Description: 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.
Latest version: 0.1.0

# 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

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

## Basic Usage

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

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

## Advanced Usage

```tsx
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.

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

### CurrencyChooser.Select

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

```tsx
<CurrencyChooser.Select />
```

### CurrencyChooser.Trigger

A button component that displays the current currency.

```tsx
<CurrencyChooser.Trigger />
```

### CurrencyChooser.Options

A container for currency options.

```tsx
<CurrencyChooser.Options />
```

### CurrencyChooser.Option

An individual currency option.

```tsx
<CurrencyChooser.Option value="USD" />
```

### CurrencyChooser.Value

A component that displays the currently selected currency.

```tsx
<CurrencyChooser.Value />
```

## Using with Custom UI Components

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

```tsx
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>
  );
}
```