Files
zeekay 1cfa22a698 merge: upstream/main (sync, brand preserved)
# Conflicts:
#	.github/workflows/check-insights-major-version.yml
#	.github/workflows/check-posthog-major-version.yml
#	.github/workflows/ci-security.yaml
#	.github/workflows/validate-versioning.yml
#	AGENTS.md
#	AGENTS.md~upstream_main
#	packages/ai/src/otel/capture.ts
#	packages/ai/src/otel/mappers/aiSdk.ts
#	packages/ai/src/otel/mappers/index.ts
#	packages/ai/src/otel/types.ts
#	packages/core/src/__tests__/posthog.init.spec.ts
#	packages/react-native/src/PostHogProvider.tsx
#	packages/react/src/context/PostHogContext.ts
#	packages/react/src/context/PostHogProvider.tsx
#	tooling/eslint-plugin-insights/no-unsafe-web-global.js
2026-06-02 10:52:56 -07:00
..

Insights React Playground

This is a Next.js playground application that demonstrates the @hanzo/react SDK.

Features

  • Cat Gallery: A grid of cat images from cataas.com
  • Event Display: Real-time display of Insights events in the top-right corner

Running the Playground

Important: This playground is excluded from the main workspace, so you need to install dependencies separately.

  1. Navigate to this directory:

    cd playground/react-nextjs
    
  2. Install dependencies:

    pnpm install
    
  3. Run the development server:

    pnpm dev
    
  4. Open http://localhost:3000 in your browser

  5. Scroll down to see the cat gallery come into view and watch the $element_viewed event appear in the event display

How It Works

  • The EventDisplay component intercepts Insights events and displays them in real-time