@growth-rail/react

The Official Growth Rail React SDK. Easily integrate referral programs, track user growth, and display referral dashboards in your React applications.

🚀 Features

• Context-based Initialization: Seamless setup with GrowthRailProvider.
• Hooks for Ease of Use: Access the SDK anywhere with the useGrowthRail hook.
• Built-in UI Components: Drop-in widgets like ReferralDashboard to get started instantly.
• Fully Type-Safe: Written in TypeScript with complete definition support.
• Small Footprint: Optimized for performance and minimal bundle size.

📦 Installation

This package requires @growth-rail/core as a dependency and react as a peer dependency.

# npm
npm install @growth-rail/react @growth-rail/core

# yarn
yarn add @growth-rail/react @growth-rail/core

# pnpm
pnpm add @growth-rail/react @growth-rail/core

🛠 Usage

1. Wrap your App with GrowthRailProvider

Initialize the SDK at the root of your application. Provide your API Key and optionally a userId if the user is already authenticated.

import { GrowthRailProvider } from '@growth-rail/react';

function App() {
  return (
    <GrowthRailProvider 
      apiKey="your_api_key_here" 
      userId="user_123" // Optional: initialize for a specific user
    >
      <your-application-code />
    </GrowthRailProvider>
  );
}

2. Track Events and Get User Info

Use the useGrowthRail hook in any child component to track referrals or retrieve user details.

import { useGrowthRail } from '@growth-rail/react';

export function InviteButton() {
  const { trackReferral, getUserId } = useGrowthRail();

  const handleInvite = async (code: string) => {
    await trackReferral(code);
    console.log('Referral tracked for user:', getUserId());
  };

  return <button onClick={() => handleInvite('FRIEND_CODE')}>Use Invite</button>;
}

3. Display the Referral Dashboard

Use the ReferralDashboard component to provide a white-labeled UI where users can see their referral link and rewards.

import { ReferralDashboard } from '@growth-rail/react';

export function DashboardPage() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>My Rewards</h1>
      <ReferralDashboard 
        title="Invite your friends and earn!" 
        onLinkCopied={() => alert('Link copied!')}
      />
    </div>
  );
}

📖 Documentation

For full documentation and advanced configuration, visit docs.growthrail.com.

📄 License

MIT © Growth Rail