React Promotions UI

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

Installation

Install the package using npm:

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.

import { ParityDealsProvider } from '@paritydeals/react-promotions-ui';

function App() {
  return (
    <ParityDealsProvider productId="YOUR_PRODUCT_ID">
      {/* 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.

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.

<PDPriceFormatted
  price={99.99}
/>

Configuration Options

| Option | Type | Default | Description | | -------------------- | ------- | -------- | ---------------------------------------- | | localizePricing | boolean | true | Convert to local currency | | price | 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:

<PDPriceFormatted
  price={99.99}
  displayPrice={99.99}
  isOriginalDisplay={true}
/>

Example Usage

Combine both for a side-by-side comparison:

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

<PDPriceInteger price={99.99} />

Configuration Options

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

PDPriceDecimal

Displays just the decimal portion.

<PDPriceDecimal price={99.99} />

Configuration Options

| Option | Type | Default | Description | | -------------------- | ------- | -------- | ---------------------------------------- | | localizePricing | boolean | true | Convert to local currency | | price | 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 $, ₹, €).

<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).

<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., ".").

<PDPriceDecimalSeparator />

Configuration Options

| Option | Type | Default | Description | | -------------------- | ------- | -------- | ---------------------------------------- | | localizePricing | boolean | true | Convert to local currency | | price | 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:

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

Support

Need help or have questions? Reach out to us anytime at [email protected].