React Hooks

'use client';

import { useTrack } from '@solute-ai/sdk/nextjs';

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

  const handleClick = () => {
    track('Signup Button Clicked', {
      button_id: 'header-cta',
    });
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

'use client';

import { useIdentify } from '@solute-ai/sdk/nextjs';

export function LoginForm() {
  const identify = useIdentify();

  const handleLogin = async (userData: { id: string; email: string }) => {
    identify(userData.id, {
      email: userData.email,
    });
  };

  return <form onSubmit={handleLogin}>...</form>;
}

'use client';

import { useFeatureEnabled } from '@solute-ai/sdk/nextjs';

export function CheckoutButton() {
  const showNewCheckout = useFeatureEnabled('new-checkout-flow');

  return (
    <div>
      {showNewCheckout ? (
        <NewCheckoutButton />
      ) : (
        <OldCheckoutButton />
      )}
    </div>
  );
}

'use client';

import { useFeatureFlag } from '@solute-ai/sdk/nextjs';

export function CheckoutPage() {
  const config = useFeatureFlag<{ theme: string }>('checkout-config', {
    defaultValue: { theme: 'light' },
  });

  return <div className={config?.theme}>Checkout</div>;
}

'use client';

import { useExperiment } from '@solute-ai/sdk/nextjs';

export function PricingPage() {
  const variant = useExperiment('pricing-test');

  return (
    <div>
      {variant === 'variant-a' ? (
        <NewPricingLayout />
      ) : (
        <OriginalPricingLayout />
      )}
    </div>
  );
}

'use client';

import { useUser } from '@solute-ai/sdk/nextjs';

export function UserInfo() {
  const { userId, anonymousId, sessionId } = useUser();

  return (
    <div>
      <p>User ID: {userId || 'Anonymous'}</p>
      <p>Anonymous ID: {anonymousId}</p>
      <p>Session: {sessionId}</p>
    </div>
  );
}

'use client';

import { useSolute } from '@solute-ai/sdk/nextjs';

export function MyComponent() {
  const { track, identify, client } = useSolute();

  const handleAction = () => {
    track('Action', { type: 'custom' });
    identify('user_123', { email: 'user@example.com' });
  };

  return <button onClick={handleAction}>Action</button>;
}