Skip to content

react

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

react

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
tsup.config.ts
tsup.config.ts
 
 
vitest.config.ts
vitest.config.ts
 
 

README.md

@inspectlet/react

npm types license

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 Inspectlet API.
  • SSR-safe. init() runs in useEffect, 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/react

Quickstart

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: true on the provider config so Inspectlet's built-in history.pushState listener 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