> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paritydeals.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Promotions UI

> A React SDK for integrating ParityDeals dynamic pricing and discounts directly into your React application.

## Installation

Install the package using npm:

```bash theme={null}
npm install @paritydeals/react-promotions-ui
```

## Getting Started

To start using the SDK, wrap your app with the `ParityDealsProvider` at the root level. This sets up the necessary context.

You can copy your product ID from the listing or promotion details page:

<Frame>
  <img height="200" src="https://mintcdn.com/paritydeals/a_p0GnrJXgkhOEHC/images/copy-product-id.png?fit=max&auto=format&n=a_p0GnrJXgkhOEHC&q=85&s=26c1bc03f4947055f33538ca98c10c0d" data-path="images/copy-product-id.png" />
</Frame>

```tsx theme={null}
import { ParityDealsProvider } from '@paritydeals/react-promotions-ui';

function App() {
  return (
    // Replace with your product ID of the promotion
    <ParityDealsProvider productId="promo_7e2de26fb47644e58e867a20i898j748">
      {/* Your app components */}
    </ParityDealsProvider>
  );
}
```

## Attributes:

You can use the following attributes to customize the behavior of the components.

| Attribute            | Type   | Default | Description                                                                                                               |
| -------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------- |
| `productId`          | string | ''      | The product ID to display                                                                                                 |
| `baseCurrencyCode`   | string | USD     | If you use any base currency other than USD, you must provide this. Currency conversion will be done using this code.     |
| `baseCurrencySymbol` | string | \$      | If you use any base currency other than USD, you must provide this. Only for the displaying purpose, but still important. |

***

## Components

Use these ready-made UI components to easily show location-aware pricing and promotional content.

### `PDBanner`

Displays a location-aware discount banner. You can style and position it as needed.

```tsx theme={null}
import { PDBanner } from '@paritydeals/react-promotions-ui';

<PDBanner
  backgroundColor="#f0f0f0"
  fontColor="#333"
  borderRadius="4px"
  fontSize="16px"
  noStyles={false}
  addCloseIcon={true}
  className="custom-banner"
  onClose={() => console.log('Banner closed')}
/>
```

***

### PDPriceFormatted

Simplified component to display discounted and original prices dynamically based on the user’s location.

#### Display Discounted Price

Use this to show the localized or discounted price. The price is automatically formatted based on the user's location, including currency symbols, decimal separators, and digit grouping — for example, ₹9,999.99 for India, ¥10,000 for Japan, and 9.999,99 € for Italy where the currency symbol appears on the right.

```tsx theme={null}
<PDPriceFormatted
  price={99.99}
/>
```

##### Configuration Options

| Option                 | Type                 | Default | Description                                                                                                                                                                                               |
| ---------------------- | -------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `localizePricing`      | boolean              | true    | Convert to local currency                                                                                                                                                                                 |
| `price` (required)     | number               | 0       | The price of the product.                                                                                                                                                                                 |
| `className`            | string               | ''      | custom class name for the component                                                                                                                                                                       |
| `currencyDisplay`      | `symbol\|code\|name` | symbol  | The currency display format. This only works on the `data-pd-price-formatted` element.                                                                                                                    |
| `showDecimal`          | boolean              | false   | Whether to show decimals                                                                                                                                                                                  |
| `minimumDecimalDigits` | number               | 0       | The minimum number of decimal digits                                                                                                                                                                      |
| `maximumDecimalDigits` | number               | 2       | The maximum number of decimal digits. Maximum is 2.                                                                                                                                                       |
| `isOriginalDisplay`    | boolean              | false   | Used to show the original price when there’s a discount, typically for comparison (e.g., strikethrough price). This price is not modified by discounts but may still be affected by currency conversions. |
| `displayPrice`         | number               | 0       | The price to display. If not provided, the original price will be displayed.                                                                                                                              |

#### Display Original Price (Strikethrough)

Optionally show the original price with a strikethrough effect:

```tsx theme={null}
<PDPriceFormatted
  price={99.99}
  displayPrice={99.99}
  isOriginalDisplay={true}
/>
```

#### Example Usage

Combine both for a side-by-side comparison:

```tsx theme={null}
<div className="price-container">
  <PDPriceFormatted price={89.99} />
  <PDPriceFormatted
    price={99.99}
    displayPrice={99.99}
    isOriginalDisplay={true}
  />
</div>
```

***

## Granular Price Components

Use these components individually to build custom price formats with full styling control.

### PDPriceInteger

Displays just the integer part of the price.

```tsx theme={null}
<PDPriceInteger price={99.99} />
```

##### Configuration Options

| Option             | Type    | Default | Description                         |
| ------------------ | ------- | ------- | ----------------------------------- |
| `localizePricing`  | boolean | true    | Convert to local currency           |
| `price` (required) | number  | 0       | The price of the product.           |
| `className`        | string  | ''      | custom class name for the component |

***

### PDPriceDecimal

Displays just the decimal portion.

```tsx theme={null}
<PDPriceDecimal price={99.99} />
```

##### Configuration Options

| Option                 | Type    | Default | Description                                         |
| ---------------------- | ------- | ------- | --------------------------------------------------- |
| `localizePricing`      | boolean | true    | Convert to local currency                           |
| `price` (required)     | number  | 0       | The price of the product.                           |
| `className`            | string  | ''      | custom class name for the component                 |
| `minimumDecimalDigits` | number  | 0       | The minimum number of decimal digits                |
| `maximumDecimalDigits` | number  | 2       | The maximum number of decimal digits. Maximum is 2. |

***

### PDPriceCurrencySymbol

Renders the currency symbol (like \$, ₹, €).

```tsx theme={null}
<PDPriceCurrencySymbol  className="currency-symbol" />
```

##### Configuration Options

| Option            | Type    | Default | Description                         |
| ----------------- | ------- | ------- | ----------------------------------- |
| `localizePricing` | boolean | true    | Convert to local currency           |
| `className`       | string  | ''      | custom class name for the component |

***

### `PDPriceCurrencyCode`

Renders the full currency code (like USD, INR, EUR).

```tsx theme={null}
<PDPriceCurrencyCode />
```

##### Configuration Options

| Option            | Type    | Default | Description                         |
| ----------------- | ------- | ------- | ----------------------------------- |
| `localizePricing` | boolean | true    | Convert to local currency           |
| `className`       | string  | ''      | custom class name for the component |

***

### PDPriceDecimalSeparator

Renders the decimal separator based on the user's location (e.g., ".").

```tsx theme={null}
<PDPriceDecimalSeparator />
```

##### Configuration Options

| Option             | Type    | Default | Description                         |
| ------------------ | ------- | ------- | ----------------------------------- |
| `localizePricing`  | boolean | true    | Convert to local currency           |
| `price` (required) | number  | 0       | The price of the product.           |
| `className`        | string  | ''      | custom class name for the component |

### Custom Display Example

Example using all components to create a custom layout:

```tsx theme={null}
<div className="custom-price-display">
  <PDPriceCurrencySymbol localizePricing={true} />
  <PDPriceInteger price={99.99} />
  <PDPriceDecimalSeparator price={99.99} />
  <PDPriceDecimal price={99.99} />
  <PDPriceCurrencyCode localizePricing={true} />
</div>
```

***

## Support

Need help or have questions? Reach out to us anytime at **[hi@paritydeals.com](mailto:hi@paritydeals.com)**.