React SDK

Integrate Growise in React and Next.js using @growise/web-sdk. Same browser SDK as the JavaScript guide — init once, identify on login, track product events. Version 1.2.0.

Overview

React apps use the ES module build of the Growise Web SDK. Call init once at app bootstrap (not inside every component render). For Next.js App Router, keep SDK calls in client components or a shared client module.

Package: @growise/web-sdk
Same APIs as JavaScript / Web SDK (track, onUserLogin, identify, logout, push, in-app)
Works with CRA, Vite, Next.js, Remix

Install

npmbash

npm install @growise/web-sdk

Env (Vite)bash

VITE_GROWISE_API_KEY=gk_your_key

Env (Next.js)bash

NEXT_PUBLIC_GROWISE_API_KEY=gk_your_key

Shared service module

Initialize once and export the singleton for the rest of the app.

src/services/growise.tstypescript

import growise from '@growise/web-sdk'

const key =
  globalThis._importMeta_.env.VITE_GROWISE_API_KEY ||
  process.env.NEXT_PUBLIC_GROWISE_API_KEY

growise.init(key, {
  env: 'prod',
  appVersion: '1.0.0',
})

export default growise

Identify after login

LoginButton.tsxtsx

'use client' // Next.js App Router

import growise from '@/services/growise'

export function LoginButton() {
  return (
    <button
      onClick={() =>
        growise.onUserLogin({
          Site: {
            Identity: 'user_10293',
            Name: 'Alex Morgan',
            Email: 'alex@example.com',
          },
          Plan: 'Pro',
        })
      }
    >
      Log in
    </button>
  )
}

Track events

Product cardtsx

import growise from '@/services/growise'

function onViewProduct(product: { id: string; category: string; price: number }) {
  growise.track('Product Viewed', {
    product_id: product.id,
    category: product.category,
    price: product.price,
  })
}

Logout

Always call logout on sign-out so guest_id rotates correctly.

Sign outtypescript

await growise.logout()

SPA / Next.js route changes

The SDK fires $pageview on full page loads. For client-side navigations, optionally track yourself.

Optional pageviewtypescript

// e.g. in a router listener
growise.track('$pageview', {
  path: window.location.pathname,
  title: document.title,
})

Next steps

Full API reference (identity model, environments, push, troubleshooting) lives on the JavaScript / Web SDK page — React uses the same library.

Read JavaScript / Web SDK for init options, profilePush, push, and troubleshooting
Verify events in the Growise live debugger after login + track