@inspectlet/react
v1.0.1
Published
Official Inspectlet React SDK — provider, hooks, and automatic pageview tracking for Next.js and React Router. Session recording, heatmaps, and form analytics.
Maintainers
inspectlet-adminReadme
@inspectlet/react
Official Inspectlet React SDK — session recording, heatmaps, form analytics, and AI session insights for React, Next.js, and Vite apps. Ergonomic provider, hooks, and automatic pageview tracking for Next.js App Router and React Router.
A modern alternative to LogRocket, FullStory, and Hotjar — with Inspectlet's deep form analytics and AI session insights, and a free tier that's free forever.
- Drop-in for any React app. Just wrap your tree with
<InspectletProvider>. - Auto pageview tracking for Next.js App Router and React Router v6+.
- TypeScript-first. Hooks return a fully typed
InspectletAPI. - SSR-safe.
init()runs inuseEffect, so Inspectlet only loads in the browser. - Tree-shakeable. Framework adapters live behind subpath imports — pay for what you use.
Install
npm install @inspectlet/browser @inspectlet/reactQuickstart
Next.js (App Router)
// app/providers.tsx
'use client';
import { InspectletProvider } from '@inspectlet/react';
import { useNextPageviews } from '@inspectlet/react/next';
function NextPageviewTracker() {
useNextPageviews();
return null;
}
export function Providers({ children }: { children: React.ReactNode }) {
return (
<InspectletProvider config={{ wid: 'YOUR_WID', disableVirtualPage: true }}>
<NextPageviewTracker />
{children}
</InspectletProvider>
);
}// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body><Providers>{children}</Providers></body>
</html>
);
}Vite + React Router
import { BrowserRouter } from 'react-router-dom';
import { InspectletProvider } from '@inspectlet/react';
import { useReactRouterPageviews } from '@inspectlet/react/router';
function PageviewTracker() {
useReactRouterPageviews();
return null;
}
function App() {
return (
<BrowserRouter>
<InspectletProvider config={{ wid: 'YOUR_WID', disableVirtualPage: true }}>
<PageviewTracker />
<Routes>{/* ... */}</Routes>
</InspectletProvider>
</BrowserRouter>
);
}Plain React (no router)
import { InspectletProvider } from '@inspectlet/react';
export default function App() {
return (
<InspectletProvider config={{ wid: 'YOUR_WID' }}>
<YourApp />
</InspectletProvider>
);
}Hooks
useInspectlet()
Returns the typed Inspectlet API. Works inside or outside <InspectletProvider> (falls back to the singleton).
import { useInspectlet } from '@inspectlet/react';
function CheckoutButton() {
const insp = useInspectlet();
return (
<button onClick={() => insp.tagSession({ event: 'checkout-clicked' })}>
Buy
</button>
);
}useInspectletIdentify(userId, tags?)
Identifies the user and optionally tags the session. Pass null/undefined to skip while auth is still resolving.
import { useInspectletIdentify } from '@inspectlet/react';
function App() {
const { user } = useAuth();
useInspectletIdentify(user?.email, { plan: user?.plan });
return <Routes />;
}useNextPageviews() — @inspectlet/react/next
Reports a virtual pageview on every Next.js App Router navigation. Requires next >= 13.
useReactRouterPageviews() — @inspectlet/react/router
Reports a virtual pageview on every React Router v6+ location change.
Tip: When using either pageview hook, set
disableVirtualPage: trueon the provider config so Inspectlet's built-inhistory.pushStatelistener doesn't fire alongside the hook (which would double-count pageviews).
Configuration
<InspectletProvider config={...}> accepts the same config as init() from @inspectlet/browser. Common options:
<InspectletProvider config={{
wid: 'YOUR_WID', // required
enabled: process.env.NODE_ENV === 'production',
disableVirtualPage: true, // when using pageview hooks
cookieLocation: '.example.com',
crossDomain: ['app.com', 'docs.com'],
}} />The config is captured on mount — changing it later won't re-init Inspectlet. If you need different settings for different environments, branch on the config you pass:
const config = isProd ? prodConfig : devConfig;
<InspectletProvider config={config}>{children}</InspectletProvider>License
MIT
Made by Inspectlet — session recording, heatmaps, form analytics, and AI session insights for product and growth teams.
Install free · Docs · Pricing · Compare