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.

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.