mirror of
https://github.com/hanzoai/insights-js.git
synced 2026-10-30 18:34:19 +00:00
# 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
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.
-
Navigate to this directory:
cd playground/react-nextjs -
Install dependencies:
pnpm install -
Run the development server:
pnpm dev -
Open http://localhost:3000 in your browser
-
Scroll down to see the cat gallery come into view and watch the
$element_viewedevent appear in the event display
How It Works
- The
EventDisplaycomponent intercepts Insights events and displays them in real-time