React SDK

You can use Eventvisor's React SDK along with the JavaScript SDK in your React applications for more convenience.

Installation#

Install with npm:

Command

$ npm install --save @eventvisor/sdk @eventvisor/react

Setting up#

Use the provider component and pass the Eventvisor instance to it:

your-app/index.jsx

import React from "react";
import ReactDOM from "react-dom";
import { createInstance } from "@eventvisor/sdk";
import { EventvisorProvider } from "@eventvisor/react";
const eventvisor = createInstance({
  datafile: { ... },
});
ReactDOM.render(
  <EventvisorProvider instance={eventvisor}>
    <App />
  </EventvisorProvider>,
  document.getElementById("root")
);

Learn about datafile fetching usage in JavaScript SDK page.

Hooks#

isReady#

If you are using any persistence layer, you can wait for the SDK to be ready:

your-app/App.jsx

import React from "react";
import { isReady } from "@eventvisor/react";
function App() {
  const ready = isReady();
  if (!ready) {
    return <div>Loading...</div>;
  }
  return <div>App</div>;
}

track#

your-app/App.jsx

import React from "react";
import { useEventvisor } from "@eventvisor/react";
function App() {
  const { track } = useEventvisor();
  return (
    <div>
      <button onClick={() => {
        track("button_click", { buttonId: "cta" });
      }}>
        CTA button
      </button>
    </div>
  );
}

setAttribute#

your-app/App.jsx

import React from "react";
import { useEventvisor } from "@eventvisor/react";
function App() {
  const { setAttribute } = useEventvisor();
  setAttribute("deviceId", "device-123");
  setAttribute("userId", "user-123");
  return <div>...</div>;
}

removeAttribute#

your-app/App.jsx

import React from "react";
import { useEventvisor } from "@eventvisor/react";
function App() {
  const { removeAttribute } = useEventvisor();
  removeAttribute("deviceId");
  removeAttribute("userId");
  return <div>...</div>;
}

isAttributeSet#

your-app/App.jsx

import React, { useEffect } from "react";
import { useEventvisor } from "@eventvisor/react";
function App() {
  const { isAttributeSet, setAttribute } = useEventvisor();
  useEffect(() => {
    if (!isAttributeSet("deviceId")) {
      setAttribute("deviceId", someUUIDValueHere);
    }
  }, []);
  return <div>...</div>;
}

getAttributeValue#

your-app/App.jsx

import React from "react";
import { useEventvisor } from "@eventvisor/react";
function App() {
  const { getAttributeValue } = useEventvisor();
  const deviceId =getAttributeValue("deviceId");
  const userId = getAttributeValue("userId");
  return <div>...</div>;
}

useInstance#

You can get hold of the Eventvisor instance for any direct usage:

your-app/App.jsx

import React from "react";
import { useInstance } from "@eventvisor/react";
function App() {
  const eventvisor = useInstance();
  return <div>App</div>;
}