UpsellProvider

The UpsellProvider component initializes the SDK and provides context to child components.

Installation

npm install @upsellsdk/react

Usage

Wrap your app with UpsellProvider:

import { UpsellProvider } from '@upsellsdk/react'

function App() {
  return (
    <UpsellProvider
      config={{
        apiKey: 'us_your_api_key',
        user: {
          id: 'user-123',
          email: 'user@example.com',
          plan: 'free'
        },
        onUpgrade: () => {
          window.location.href = '/pricing'
        }
      }}
    >
      <YourApp />
    </UpsellProvider>
  )
}

Props

Prop	Type	Required	Description
config.apiKey	string	Yes	Your UpsellSDK API key
config.user	object	Yes	Current user info
config.user.id	string	Yes	User ID
config.user.email	string	No	User email
config.user.plan	string	No	Current plan
config.onUpgrade	function	No	Called when user clicks upgrade

With Dynamic User

Update user info when it changes:

function App() {
  const { user, isLoading } = useAuth()

  if (isLoading) return <Loading />

  return (
    <UpsellProvider
      config={{
        apiKey: process.env.UPSELLSDK_API_KEY,
        user: user ? {
          id: user.id,
          email: user.email,
          plan: user.subscription?.plan || 'free'
        } : null,
        onUpgrade: () => navigate('/pricing')
      }}
    >
      <YourApp />
    </UpsellProvider>
  )
}