React SDK

Use @convertmax/react when you want React-specific bindings on top of the base JavaScript SDK.

Install the packages

Install the React package together with the base SDK:

npm install @convertmax/react @convertmax/js

Wrap your app

Configure the provider with the Convertmax event endpoint:

import { ConvertMaxProvider, useConvertmax } from "@convertmax/react";

function SignupButton() {
  const convertmax = useConvertmax();

  return (
    <button
      onClick={() =>
        void convertmax.track("click", {
          target: "hero_cta",
          page: "https://example.com/pricing"
        })
      }
    >
      Start free
    </button>
  );
}

export function App() {
  return (
    <ConvertMaxProvider
      options={{
        host: "https://event.convertmax.io",
        apiKey: "YOUR_API_KEY",
        autoPage: true
      }}
    >
      <SignupButton />
    </ConvertMaxProvider>
  );
}

Available React helpers

The package includes these React-focused exports:

• ConvertMaxProvider or ConvertmaxProvider
• useConvertmax()
• usePageTracking(name?, properties?)

Send baseline events

After the provider is mounted, track at least a page view and one conversion path event:

import { useConvertmax } from "@convertmax/react";

function Example() {
  const convertmax = useConvertmax();

  return (
    <button
      onClick={() => void convertmax.track("page_view", {})}
    >
      Track page view
    </button>
  );
}

Verify the install

After loading your React app:

1. confirm the provider initializes successfully
2. confirm a page_view event is emitted
3. trigger one tracked event such as click, add_cart, or convert
4. confirm requests are sent to https://event.convertmax.io

Use the Convertmax Chrome Extension to inspect runtime signals and captured requests.