useProducts

useProducts

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

Usage

import { useProducts } from '@billing-js/react-billing-js'

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
}

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.