React SDK - Eventvisor

The React package provides a provider and hooks around an existing JavaScript SDK instance.

npm install @eventvisor/sdk @eventvisor/react

Provider#

import { createEventvisor } from "@eventvisor/sdk";
import { EventvisorProvider } from "@eventvisor/react";
const eventvisor = createEventvisor({ datafile });
root.render(
  <EventvisorProvider instance={eventvisor}>
    <App />
  </EventvisorProvider>,
);

Readiness#

import { useEventvisorReady } from "@eventvisor/react";
function App() {
  const ready = useEventvisorReady();
  return ready ? <Routes /> : <Loading />;
}

SDK operations#

import { useEventvisor } from "@eventvisor/react";
function CheckoutButton() {
  const { track, setAttribute, removeAttribute, getAttributeValue, isAttributeSet } = useEventvisor();
  return (
    <button onClick={() => track("checkoutStarted", { source: "header" })}>
      Checkout
    </button>
  );
}

The returned methods are bound to the active instance and remain stable until the provider instance changes.

The track method follows the JavaScript SDK contract, so events that accept an empty object can be tracked without a second argument:

<button onClick={() => track("checkoutOpened")}>Start checkout</button>

Direct instance access#

import { useEventvisorInstance } from "@eventvisor/react";
const eventvisor = useEventvisorInstance();

Reactive attributes#

Read one attribute and re-render when it changes:

import { useEventvisorAttribute } from "@eventvisor/react";
const userId = useEventvisorAttribute("userId");

Read the complete reactive attribute map:

import { useEventvisorAttributes } from "@eventvisor/react";
const { userId, plan } = useEventvisorAttributes();

Both hooks update after attributes are set or removed and after a datafile update changes attribute state.

Hooks throw a clear error when used outside EventvisorProvider.