React app

npm install @grainql/analytics-web

// App.tsx
import { GrainProvider } from '@grainql/analytics-web/react';
import { HomePage } from './HomePage';

export function App() {
  return (
    <GrainProvider
      config={{
        tenantId: 'your-tenant-id',
        defaultConfigurations: {
          hero_variant: 'A',
          new_dashboard_enabled: 'false'
        }
      }}
    >
      <HomePage />
    </GrainProvider>
  );
}

import { useTrack } from '@grainql/analytics-web/react';

export function SignupButton() {
  const track = useTrack();

  return (
    <button onClick={() => track('signup_clicked', { location: 'hero' })}>
      Get Started
    </button>
  );
}

import { useConfig } from '@grainql/analytics-web/react';

export function Dashboard() {
  const { value } = useConfig('new_dashboard_enabled');

  return value === 'true' ? <NewDashboard /> : <LegacyDashboard />;
}

import { useConfig, useTrack } from '@grainql/analytics-web/react';
import { useEffect } from 'react';

const variants = {
  A: { title: 'Welcome to Our App', buttonText: 'Get Started' },
  B: { title: 'Boost Your Productivity', buttonText: 'Start Free Trial' }
};

export function HeroSection() {
  const { value } = useConfig('hero_variant');
  const track = useTrack();
  const variant = value === 'B' ? 'B' : 'A';
  const content = variants[variant];

  useEffect(() => {
    track('hero_viewed', { variant });
  }, [variant, track]);

  return (
    <section>
      <h1>{content.title}</h1>
      <button onClick={() => track('hero_cta_clicked', { variant })}>
        {content.buttonText}
      </button>
    </section>
  );
}

import { useGrainAnalytics } from '@grainql/analytics-web/react';
import { useEffect } from 'react';
import { useAuth } from './useAuth';

export function AuthSync({ children }: { children: React.ReactNode }) {
  const grain = useGrainAnalytics();
  const { user } = useAuth();

  useEffect(() => {
    if (user) {
      grain.identify(user.id);
      grain.setProperty({ plan: user.plan });
    } else {
      grain.logout();
    }
  }, [user, grain]);

  return <>{children}</>;
}

// App.tsx
import { GrainProvider } from '@grainql/analytics-web/react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './AuthProvider';
import { AuthSync } from './AuthSync';
import { HeroSection } from './HeroSection';
import { Dashboard } from './Dashboard';

export function App() {
  return (
    <GrainProvider
      config={{
        tenantId: 'your-tenant-id',
        defaultConfigurations: {
          hero_variant: 'A',
          new_dashboard_enabled: 'false'
        }
      }}
    >
      <AuthProvider>
        <AuthSync>
          <BrowserRouter>
            <Routes>
              <Route path="/" element={<HeroSection />} />
              <Route path="/dashboard" element={<Dashboard />} />
            </Routes>
          </BrowserRouter>
        </AuthSync>
      </AuthProvider>
    </GrainProvider>
  );
}