@eventvisor/react

React bindings for Eventvisor.

npm install @eventvisor/sdk @eventvisor/react

import { createEventvisor } from "@eventvisor/sdk";
import { EventvisorProvider } from "@eventvisor/react";

const eventvisor = createEventvisor({ datafile });

root.render(
  <EventvisorProvider instance={eventvisor}>
    <App />
  </EventvisorProvider>,
);

Use useEventvisorReady() for readiness, useEventvisorInstance() for the instance, or useEventvisor() for stable bound methods.

function CheckoutButton() {
  const ready = useEventvisorReady();
  const { track } = useEventvisor();

  return <button disabled={!ready} onClick={() => track("checkout.started")}>Checkout</button>;
}

Attribute hooks subscribe to SDK events and re-render only when the observed value changes:

function UserSummary() {
  const country = useEventvisorAttribute("country");
  const { userId, plan } = useEventvisorAttributes();

  return <span>{userId} · {plan} · {country}</span>;
}

See the React SDK documentation for more information.

License

MIT © Fahad Heylaal