> For the complete documentation index, see [llms.txt](https://docs.billingjs.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.billingjs.com/hooks/useproducts.md).

# useProducts

### `useProducts`

A custom React hook that fetches and manages information about products and subscriptions.

#### Usage

<pre class="language-javascript"><code class="lang-javascript"><strong><a data-footnote-ref href="#user-content-fn-1">import { useProducts } from '@billing-js/react-billing-js'</a>
</strong>
function MyComponent(props) {
  const { products, pricingFilter, loading } = useProducts(activeStripeProducts, {
    modal: {
      maskClassName: 'bg-white fixed inset-0 bg-opacity-75 transition-opacity backdrop-blur-sm',
      showPromotionCodeInput: true,
    },
    defaultCustomerName: 'userName',
    normalizePriceOnRecurrence: 'monthly',
    defaultCurrency: 'usd',
    defaultRecurrence: 'yearly',
    onPaymentSuccessful: () => history.push('/app/?welcome-to-premium'),
    onPaymentError: () => console.log(`Payment error`),
  })

  // render the component using the products, pricingFilter, and loading values
}
</code></pre>

#### Arguments

* `activeStripeProducts` (`string[]`): An array of product IDs to fetch.
* `options` (`UseProductsOptions`, optional): An optional object of options for the hook.

**Options**

* `modal` (`{ maskClassName: string, showPromotionCodeInput: boolean }`): An object with two properties, `maskClassName` and `showPromotionCodeInput`, that are used to customize the appearance and behavior of the modal window that is used to display the product and pricing information.
* `defaultCustomerName` (`string`): A string that is used as the default customer name.
* `normalizePriceOnRecurrence` (`string`, optional): A string indicating the recurrence to use for normalizing prices. If this value is set to 'monthly', the prices of all products will be normalized to the equivalent monthly price.
* `defaultCurrency` (`string`): A string indicating the default currency to use.
* `defaultRecurrence` (`string`): A string indicating the default recurrence to use.
* `onPaymentSuccessful` (`() => void`): A function that is called when the payment is successful.
* `onPaymentError` (`() => void`): A function that is called when there is an error with the payment.

#### Returns

* `products` (`Product[]`): An array of `Product` objects.
* `pricingFilter` (`PricingFilter`): An object with several properties, including `currency` (which contains a `selectedCurrency` property) and `recurrence` (which contains `selectedRecurrence`, `availableRecurrences`, and `setRecurrence` properties).
* `loading` (`boolean`): A boolean indicating whether the hook is currently in the process of fetching data.

[^1]: