React SDK

React hooks and components for Referral Engine.

The React SDK provides hooks and components for seamless integration with React and Next.js applications.

Installation

npm install @referral-engine/react

Setup

Wrap your app with the ReferralProvider:

import { ReferralProvider } from '@referral-engine/react'

export default function App({ children }) {
  return (
    <ReferralProvider apiKey="your_api_key">
      {children}
    </ReferralProvider>
  )
}

Using Hooks

useReferralLink

Generate and manage referral links for the current user:

import { useReferralLink } from '@referral-engine/react'

function ShareButton() {
  const { link, isLoading, error } = useReferralLink({
    userId: currentUser.id,
    campaignId: 'camp_abc'
  })
  
  if (isLoading) return <Spinner />
  
  return (
    <button onClick={() => navigator.share({ url: link.url })}>
      Share & Earn $10
    </button>
  )
}

useReferralStats

Display referral statistics to your users:

import { useReferralStats } from '@referral-engine/react'

function ReferralDashboard() {
  const { stats } = useReferralStats({ userId: currentUser.id })
  
  return (
    <div>
      <p>Total Referrals: {stats.totalReferrals}</p>
      <p>Pending Rewards: {stats.pendingRewards}</p>
      <p>Earned: {stats.totalEarned}</p>
    </div>
  )
}

Components

Pre-built components for common patterns:

import { ShareWidget, ReferralLeaderboard } from '@referral-engine/react'

// Drop-in share widget
<ShareWidget 
  campaignId="camp_abc"
  theme="light"
/>

// Leaderboard showing top referrers
<ReferralLeaderboard 
  campaignId="camp_abc"
  limit={10}
/>