@vizr/react

React hooks and components for Vizr product analytics.

Install

npm install @vizr/react @vizr/browser

Quick Start

// main.tsx
import { VizrProvider } from '@vizr/react';

root.render(
  <VizrProvider siteId="vzr_your_site_id">
    <App />
  </VizrProvider>
);

// AnyComponent.tsx
import { useVizr } from '@vizr/react';

export function UpgradeButton() {
  const { track } = useVizr();
  return (
    <button onClick={() => track('upgrade_clicked', { plan: 'pro' })}>
      Upgrade to Pro
    </button>
  );
}

API

<VizrProvider siteId="..." />

Wrap your app to initialize Vizr. Accepts all VizrConfig options.

useVizr()

Returns { track, identify, page, reset }.

usePageView(properties?)

Auto-tracks a page view when the component mounts.

useTrackMount(eventName, properties?)

Tracks a specific event when the component mounts.

withPageView(Component, eventName?, properties?)

HOC that tracks a page view on mount.

License

MIT — vizr.app