React SDK

The Inslytic React SDK (@inslytic/sdk-react) provides a provider component and hook for React applications. It wraps the Browser SDK with React-idiomatic APIs.

Installation

npm install @inslytic/sdk-react
# Also installs @inslytic/sdk-browser as a peer dependency

InslyticProvider

Wrap your app with InslyticProvider to initialize the SDK. It calls init() from the Browser SDK once on mount.

app/layout.tsx

"use client";

import { InslyticProvider } from "@inslytic/sdk-react";

export default function RootLayout({ children }) {
  return (
    <InslyticProvider
      config={{
        apiKey: "your-api-key",
      }}
    >
      {children}
    </InslyticProvider>
  );
}

Props

Parameter	Type	Required	Description
config	InslyticConfig	Required	Configuration object passed to init(). See Browser SDK for options.
children	React.ReactNode	Required	Your application.

useInslytic()

Hook that returns all tracking functions from the Browser SDK. Must be used inside an InslyticProvider.

components/signup-button.tsx

"use client";

import { useInslytic } from "@inslytic/sdk-react";

export function SignupButton() {
  const { track } = useInslytic();

  return (
    <button
      onClick={() =>
        track("signup_clicked", {
          properties: { location: "hero" },
        })
      }
    >
      Sign Up
    </button>
  );
}

Return value

Parameter	Type	Required	Description
track	(eventName: string, options?: TrackOptions) => void	Required	Track a custom event.
identify	(userId: string, traits?: IdentifyTraits) => void	Required	Identify a user.
page	(properties?: Record<string, string>) => void	Required	Track a pageview.
setConsent	(granted: boolean) => void	Required	Set consent flag.
reset	() => void	Required	Reset all state. Must call init() again to resume.

Usage with Next.js App Router

Since the provider and hook are Client Components, use them in client-side code only. A common pattern is to create a providers file:

app/providers.tsx

"use client";

import { InslyticProvider } from "@inslytic/sdk-react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <InslyticProvider
      config={{
        apiKey: process.env.NEXT_PUBLIC_INSLYTIC_API_KEY!,
      }}
    >
      {children}
    </InslyticProvider>
  );
}

app/layout.tsx (Server Component)

import { Providers } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Automatic page tracking

Page views are tracked automatically. The underlying Browser SDK detects SPA navigations via history.pushState, history.replaceState, and popstate events. No manual setup is needed.

To disable automatic page tracking, pass autoPageTracking: false in the config:

<InslyticProvider config={{ apiKey: "your-api-key", autoPageTracking: false }}>
  <YourApp />
</InslyticProvider>