@eventvisor/react 0.4.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.4.0](https://github.com/eventvisor/eventvisor/compare/v0.3.0...v0.4.0) (2025-10-02)
+
+
+### Features
+
+* React SDK ([#6](https://github.com/eventvisor/eventvisor/issues/6)) ([886d2e9](https://github.com/eventvisor/eventvisor/commit/886d2e9d2626e9b7323d097bb005811743af611c))

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Fahad Heylaal (https://fahad19.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# @eventvisor/react <!-- omit in toc -->
+
+React components and hooks for Eventvisor.
+
+Visit [https://eventvisor.org/docs/sdks/react/](https://eventvisor.org/docs/sdks/react/) for more information
+
+## License <!-- omit in toc -->
+
+MIT © [Fahad Heylaal](https://fahad19.com)

package/dist/index.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.EventvisorReactSDK=e(require("react")):t.EventvisorReactSDK=e(t.react)}(this,t=>(()=>{"use strict";var e={155:e=>{e.exports=t},882:(t,e,r)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.EventvisorContext=void 0,e.EventvisorProvider=function(t){return n.createElement(e.EventvisorContext.Provider,{value:t.instance},t.children)},e.useInstance=o,e.isReady=function(){var t=o(),e=n.useState(t.isReady()),r=e[0],i=e[1];return n.useEffect(function(){t.onReady().then(function(){!1===r&&i(!0)})},[]),r},e.useEventvisor=function(){var t=o();return{instance:t,track:function(e,r){return t.track(e,r)},setAttribute:function(e,r){return t.setAttribute(e,r)},getAttributeValue:function(e){return t.getAttributeValue(e)},isAttributeSet:function(e){return t.isAttributeSet(e)},removeAttribute:function(e){return t.removeAttribute(e)}}};var n=r(155);function o(){return n.useContext(e.EventvisorContext)}e.EventvisorContext=n.createContext(void 0)}},r={};return function t(n){var o=r[n];if(void 0!==o)return o.exports;var i=r[n]={exports:{}};return e[n](i,i.exports,t),i.exports}(882)})());
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,EAAQG,QAAQ,UACR,mBAAXC,QAAyBA,OAAOC,IAC9CD,OAAO,CAAC,SAAUJ,GACQ,iBAAZC,QACdA,QAA4B,mBAAID,EAAQG,QAAQ,UAEhDJ,EAAyB,mBAAIC,EAAQD,EAAY,MAClD,CATD,CASGO,KAAOC,G,kCCTVL,EAAOD,QAAUM,C,4FCiBjB,8BAAmCC,GACjC,OACE,gBAAC,EAAAC,kBAAkBC,SAAQ,CAACC,MAAOH,EAAMI,UAAWJ,EAAMK,SAE9D,EAKA,gBAMA,qBACE,IAAMD,EAAWE,IACX,EAA4CC,EAAMC,SAASJ,EAASK,WAAnEC,EAAiB,KAAEC,EAAoB,KAU9C,OARAJ,EAAMK,UAAU,WACdR,EAASS,UAAUC,KAAK,YACI,IAAtBJ,GACFC,GAAqB,EAEzB,EACF,EAAG,IAEID,CACT,EAWA,2BACE,IAAMN,EAAWE,IAEjB,MAAO,CACLF,SAAQ,EACRW,MAAO,SAACC,EAAWb,GAAU,OAAAC,EAASW,MAAMC,EAAWb,EAA1B,EAC7Bc,aAAc,SAACC,EAAMf,GAAU,OAAAC,EAASa,aAAaC,EAAMf,EAA5B,EAC/BgB,kBAAmB,SAACD,GAAS,OAAAd,EAASe,kBAAkBD,EAA3B,EAC7BE,eAAgB,SAACF,GAAS,OAAAd,EAASgB,eAAeF,EAAxB,EAC1BG,gBAAiB,SAACH,GAAS,OAAAd,EAASiB,gBAAgBH,EAAzB,EAE/B,EAnEA,aA0BA,SAAgBZ,IAGd,OAFiBC,EAAMe,WAAW,EAAArB,kBAGpC,CAvBa,EAAAA,kBAAoBM,EAAMgB,mBAAsCC,E,GCNzEC,EAA2B,CAAC,E,OAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBH,IAAjBI,EACH,OAAOA,EAAanC,QAGrB,IAAIC,EAAS+B,EAAyBE,GAAY,CAGjDlC,QAAS,CAAC,GAOX,OAHAoC,EAAoBF,GAAUjC,EAAQA,EAAOD,QAASiC,GAG/ChC,EAAOD,OACf,CCnB0BiC,CAAoB,I","sources":["webpack://EventvisorReactSDK/webpack/universalModuleDefinition","webpack://EventvisorReactSDK/external umd \"react\"","webpack://EventvisorReactSDK/./src/index.tsx","webpack://EventvisorReactSDK/webpack/bootstrap","webpack://EventvisorReactSDK/webpack/startup"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"EventvisorReactSDK\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"EventvisorReactSDK\"] = factory(root[\"react\"]);\n})(this, (__WEBPACK_EXTERNAL_MODULE__155__) => {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__155__;","import * as React from \"react\";\nimport { Eventvisor } from \"@eventvisor/sdk\";\nimport { EventName, AttributeName, Value } from \"@eventvisor/types\";\n\n/**\n * Context\n */\nexport const EventvisorContext = React.createContext<Eventvisor | undefined>(undefined);\n\n/**\n * Provider\n */\nexport interface EventvisorProviderProps {\n  instance: Eventvisor;\n  children?: React.ReactNode;\n}\n\nexport function EventvisorProvider(props: EventvisorProviderProps) {\n  return (\n    <EventvisorContext.Provider value={props.instance}>{props.children}</EventvisorContext.Provider>\n  );\n}\n\n/**\n * Hooks\n */\nexport function useInstance(): Eventvisor {\n  const instance = React.useContext(EventvisorContext);\n\n  return instance;\n}\n\nexport function isReady(): boolean {\n  const instance = useInstance();\n  const [isEventvisorReady, setIsEventvisorReady] = React.useState(instance.isReady());\n\n  React.useEffect(() => {\n    instance.onReady().then(() => {\n      if (isEventvisorReady === false) {\n        setIsEventvisorReady(true);\n      }\n    });\n  }, []);\n\n  return isEventvisorReady;\n}\n\nexport interface UseEventvisor {\n  instance: Eventvisor;\n  track: (eventName: EventName, value: Value) => void;\n  setAttribute: (name: AttributeName, value: Value) => void;\n  getAttributeValue: (name: AttributeName) => Value | null;\n  isAttributeSet: (name: AttributeName) => boolean;\n  removeAttribute: (name: AttributeName) => void;\n}\n\nexport function useEventvisor(): UseEventvisor {\n  const instance = useInstance();\n\n  return {\n    instance,\n    track: (eventName, value) => instance.track(eventName, value),\n    setAttribute: (name, value) => instance.setAttribute(name, value),\n    getAttributeValue: (name) => instance.getAttributeValue(name),\n    isAttributeSet: (name) => instance.isAttributeSet(name),\n    removeAttribute: (name) => instance.removeAttribute(name),\n  };\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(882);\n"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE__155__","props","EventvisorContext","Provider","value","instance","children","useInstance","React","useState","isReady","isEventvisorReady","setIsEventvisorReady","useEffect","onReady","then","track","eventName","setAttribute","name","getAttributeValue","isAttributeSet","removeAttribute","useContext","createContext","undefined","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__"],"sourceRoot":""}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import*as t from"react";var e={649:(e,r,n)=>{var o,s;e.exports=(o={createContext:()=>t.createContext,createElement:()=>t.createElement,useContext:()=>t.useContext,useEffect:()=>t.useEffect,useState:()=>t.useState},s={},n.d(s,o),s)}},r={};function n(t){var o=r[t];if(void 0!==o)return o.exports;var s=r[t]={exports:{}};return e[t](s,s.exports,n),s.exports}n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var o={};n.d(o,{F3:()=>u,Nj:()=>i,i_:()=>c,nb:()=>a,pL:()=>v});var s=n(649);const a=s.createContext(void 0);function u(t){return s.createElement(a.Provider,{value:t.instance},t.children)}function i(){return s.useContext(a)}function c(){const t=i(),[e,r]=s.useState(t.isReady());return s.useEffect(()=>{t.onReady().then(()=>{!1===e&&r(!0)})},[]),e}function v(){const t=i();return{instance:t,track:(e,r)=>t.track(e,r),setAttribute:(e,r)=>t.setAttribute(e,r),getAttributeValue:e=>t.getAttributeValue(e),isAttributeSet:e=>t.isAttributeSet(e),removeAttribute:e=>t.removeAttribute(e)}}const f=o.nb,b=o.F3,p=o.i_,x=o.pL,d=o.Nj;export{f as EventvisorContext,b as EventvisorProvider,p as isReady,x as useEventvisor,d as useInstance};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","mappings":"6CAAQ,IAACA,EACJC,EAGLC,EAAOC,SAJEH,EAIU,CAAE,cAAmB,IAAOI,EAA+C,cAAG,cAAmB,IAAOA,EAA+C,cAAG,WAAgB,IAAOA,EAA4C,WAAG,UAAe,IAAOA,EAA2C,UAAG,SAAc,IAAOA,EAA0C,UAHjXH,EAAI,CAAC,EAAGI,EAAoBC,EAAEL,EAAGD,GAAWC,E,GCA7CM,EAA2B,CAAC,EAGhC,SAASF,EAAoBG,GAE5B,IAAIC,EAAeF,EAAyBC,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaN,QAGrB,IAAID,EAASK,EAAyBC,GAAY,CAGjDL,QAAS,CAAC,GAOX,OAHAQ,EAAoBH,GAAUN,EAAQA,EAAOC,QAASE,GAG/CH,EAAOC,OACf,CCrBAE,EAAoBC,EAAI,CAACH,EAASS,KACjC,IAAI,IAAIC,KAAOD,EACXP,EAAoBS,EAAEF,EAAYC,KAASR,EAAoBS,EAAEX,EAASU,IAC5EE,OAAOC,eAAeb,EAASU,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3ER,EAAoBS,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,G,4ECO3E,MAAMI,EAAoB,qBAA4Cd,GAUtE,SAASe,EAAmBC,GACjC,OACE,gBAACF,EAAkBG,SAAQ,CAACC,MAAOF,EAAMG,UAAWH,EAAMI,SAE9D,CAKO,SAASC,IAGd,OAFiB,aAAiBP,EAGpC,CAEO,SAASQ,IACd,MAAMH,EAAWE,KACVE,EAAmBC,GAAwB,WAAeL,EAASG,WAU1E,OARA,YAAgB,KACdH,EAASM,UAAUC,KAAK,MACI,IAAtBH,GACFC,GAAqB,MAGxB,IAEID,CACT,CAWO,SAASI,IACd,MAAMR,EAAWE,IAEjB,MAAO,CACLF,WACAS,MAAO,CAACC,EAAWX,IAAUC,EAASS,MAAMC,EAAWX,GACvDY,aAAc,CAACC,EAAMb,IAAUC,EAASW,aAAaC,EAAMb,GAC3Dc,kBAAoBD,GAASZ,EAASa,kBAAkBD,GACxDE,eAAiBF,GAASZ,EAASc,eAAeF,GAClDG,gBAAkBH,GAASZ,EAASe,gBAAgBH,GAExD,C","sources":["webpack://@eventvisor/react/external module \"react\"","webpack://@eventvisor/react/webpack/bootstrap","webpack://@eventvisor/react/webpack/runtime/define property getters","webpack://@eventvisor/react/webpack/runtime/hasOwnProperty shorthand","webpack://@eventvisor/react/./src/index.tsx"],"sourcesContent":["var x = (y) => {\n\tvar x = {}; __webpack_require__.d(x, y); return x\n} \nvar y = (x) => (() => (x))\nmodule.exports = x({ [\"createContext\"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), [\"createElement\"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), [\"useContext\"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), [\"useEffect\"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), [\"useState\"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","import * as React from \"react\";\nimport { Eventvisor } from \"@eventvisor/sdk\";\nimport { EventName, AttributeName, Value } from \"@eventvisor/types\";\n\n/**\n * Context\n */\nexport const EventvisorContext = React.createContext<Eventvisor | undefined>(undefined);\n\n/**\n * Provider\n */\nexport interface EventvisorProviderProps {\n  instance: Eventvisor;\n  children?: React.ReactNode;\n}\n\nexport function EventvisorProvider(props: EventvisorProviderProps) {\n  return (\n    <EventvisorContext.Provider value={props.instance}>{props.children}</EventvisorContext.Provider>\n  );\n}\n\n/**\n * Hooks\n */\nexport function useInstance(): Eventvisor {\n  const instance = React.useContext(EventvisorContext);\n\n  return instance;\n}\n\nexport function isReady(): boolean {\n  const instance = useInstance();\n  const [isEventvisorReady, setIsEventvisorReady] = React.useState(instance.isReady());\n\n  React.useEffect(() => {\n    instance.onReady().then(() => {\n      if (isEventvisorReady === false) {\n        setIsEventvisorReady(true);\n      }\n    });\n  }, []);\n\n  return isEventvisorReady;\n}\n\nexport interface UseEventvisor {\n  instance: Eventvisor;\n  track: (eventName: EventName, value: Value) => void;\n  setAttribute: (name: AttributeName, value: Value) => void;\n  getAttributeValue: (name: AttributeName) => Value | null;\n  isAttributeSet: (name: AttributeName) => boolean;\n  removeAttribute: (name: AttributeName) => void;\n}\n\nexport function useEventvisor(): UseEventvisor {\n  const instance = useInstance();\n\n  return {\n    instance,\n    track: (eventName, value) => instance.track(eventName, value),\n    setAttribute: (name, value) => instance.setAttribute(name, value),\n    getAttributeValue: (name) => instance.getAttributeValue(name),\n    isAttributeSet: (name) => instance.isAttributeSet(name),\n    removeAttribute: (name) => instance.removeAttribute(name),\n  };\n}\n"],"names":["y","x","module","exports","__WEBPACK_EXTERNAL_MODULE_react__","__webpack_require__","d","__webpack_module_cache__","moduleId","cachedModule","undefined","__webpack_modules__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","EventvisorContext","EventvisorProvider","props","Provider","value","instance","children","useInstance","isReady","isEventvisorReady","setIsEventvisorReady","onReady","then","useEventvisor","track","eventName","setAttribute","name","getAttributeValue","isAttributeSet","removeAttribute"],"sourceRoot":""}

package/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  preset: "ts-jest",
+  bail: true,
+
+  // for react testing library
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: [
+    // "@testing-library/jest-dom/extend-expect",
+    "./jest.setup.js",
+  ],
+};

package/jest.setup.js

@@ -0,0 +1,4 @@
+const { TextEncoder, TextDecoder } = require("util");
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;

package/lib/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Eventvisor } from "@eventvisor/sdk";
+import { EventName, AttributeName, Value } from "@eventvisor/types";
+/**
+ * Context
+ */
+export declare const EventvisorContext: any;
+/**
+ * Provider
+ */
+export interface EventvisorProviderProps {
+    instance: Eventvisor;
+    children?: React.ReactNode;
+}
+export declare function EventvisorProvider(props: EventvisorProviderProps): any;
+/**
+ * Hooks
+ */
+export declare function useInstance(): Eventvisor;
+export declare function isReady(): boolean;
+export interface UseEventvisor {
+    instance: Eventvisor;
+    track: (eventName: EventName, value: Value) => void;
+    setAttribute: (name: AttributeName, value: Value) => void;
+    getAttributeValue: (name: AttributeName) => Value | null;
+    isAttributeSet: (name: AttributeName) => boolean;
+    removeAttribute: (name: AttributeName) => void;
+}
+export declare function useEventvisor(): UseEventvisor;

package/lib/index.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+/**
+ * Context
+ */
+export const EventvisorContext = React.createContext(undefined);
+export function EventvisorProvider(props) {
+    return (React.createElement(EventvisorContext.Provider, { value: props.instance }, props.children));
+}
+/**
+ * Hooks
+ */
+export function useInstance() {
+    const instance = React.useContext(EventvisorContext);
+    return instance;
+}
+export function isReady() {
+    const instance = useInstance();
+    const [isEventvisorReady, setIsEventvisorReady] = React.useState(instance.isReady());
+    React.useEffect(() => {
+        instance.onReady().then(() => {
+            if (isEventvisorReady === false) {
+                setIsEventvisorReady(true);
+            }
+        });
+    }, []);
+    return isEventvisorReady;
+}
+export function useEventvisor() {
+    const instance = useInstance();
+    return {
+        instance,
+        track: (eventName, value) => instance.track(eventName, value),
+        setAttribute: (name, value) => instance.setAttribute(name, value),
+        getAttributeValue: (name) => instance.getAttributeValue(name),
+        isAttributeSet: (name) => instance.isAttributeSet(name),
+        removeAttribute: (name) => instance.removeAttribute(name),
+    };
+}
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAyB,SAAS,CAAC,CAAC;AAUxF,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,OAAO,CACL,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAA8B,CACjG,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW;IACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAErD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,OAAO;IACrB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAErF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAC3B,IAAI,iBAAiB,KAAK,KAAK,EAAE,CAAC;gBAChC,oBAAoB,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,iBAAiB,CAAC;AAC3B,CAAC;AAWD,MAAM,UAAU,aAAa;IAC3B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,OAAO;QACL,QAAQ;QACR,KAAK,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;QAC7D,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC;QACjE,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC7D,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC;QACvD,eAAe,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC;KAC1D,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@eventvisor/react",
+  "version": "0.4.0",
+  "description": "React package for Eventvisor",
+  "main": "dist/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "transpile": "rimraf lib && tsc --project tsconfig.esm.json",
+    "dist": "webpack --config ./webpack.config.js",
+    "build": "npm run transpile && npm run dist",
+    "test": "jest --config jest.config.js"
+  },
+  "author": {
+    "name": "Fahad Heylaal",
+    "url": "https://fahad19.com"
+  },
+  "homepage": "https://eventvisor.org",
+  "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eventvisor/eventvisor.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bugs": {
+    "url": "https://github.com/eventvisor/eventvisor/issues"
+  },
+  "devDependencies": {
+    "@eventvisor/sdk": "0.4.0",
+    "@eventvisor/types": "0.4.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "react": "^19.1.1"
+  },
+  "license": "MIT",
+  "gitHead": "b344241542b17d6ba180f03d78f92349df7afea8"
+}

package/src/index.spec.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { render, screen, act } from "@testing-library/react";
+
+import { createInstance } from "@eventvisor/sdk";
+
+import { EventvisorProvider, isReady, useEventvisor } from "./index";
+
+async function waitFor(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describe("react :: index", function () {
+  it("should be a function", function () {
+    expect(EventvisorProvider).toBeDefined();
+  });
+});
+
+describe("react :: index", function () {
+  const transportedEvents: Record<string, any>[] = [];
+
+  const eventvisor = createInstance({
+    datafile: {
+      schemaVersion: "1",
+      revision: "0",
+      attributes: {
+        userId: {
+          type: "string",
+        },
+        deviceId: {
+          type: "string",
+        },
+      },
+      events: {
+        page_view: {
+          type: "object",
+          properties: {
+            url: { type: "string" },
+          },
+          required: ["url"],
+        },
+        button_click: {
+          type: "object",
+          properties: {
+            buttonId: { type: "string" },
+          },
+          required: ["buttonId"],
+        },
+      },
+      destinations: {
+        test: {
+          transport: "test",
+        },
+      },
+      effects: {},
+    },
+    modules: [
+      {
+        name: "test",
+
+        transport: async ({ destinationName, eventName, payload }) => {
+          transportedEvents.push({ destinationName, eventName, payload });
+        },
+      },
+    ],
+    logLevel: "error",
+  });
+
+  it("should run tests", async function () {
+    function TestComponent() {
+      const ready = isReady();
+      const { track, setAttribute } = useEventvisor();
+
+      // Track page_view when component mounts
+      React.useEffect(() => {
+        setAttribute("userId", "user-123");
+        setAttribute("deviceId", "device-234");
+
+        track("page_view", { url: "https://www.example.com" });
+      }, []);
+
+      if (!ready) {
+        return <div>Loading...</div>;
+      }
+
+      return (
+        <div>
+          <button id="my-button" onClick={() => track("button_click", { buttonId: "my-button" })}>
+            Button
+          </button>
+        </div>
+      );
+    }
+
+    render(
+      <EventvisorProvider instance={eventvisor}>
+        <TestComponent />
+      </EventvisorProvider>,
+    );
+
+    // expect to be not found
+    try {
+      screen.getByText("Loading...");
+
+      throw new Error("Loading element should not be found");
+
+      // eslint-disable-next-line
+    } catch (error) {
+      // pass
+    }
+
+    // expect to be found
+    try {
+      const button = screen.getByText("Button");
+
+      await waitFor(100);
+
+      expect(transportedEvents.length).toEqual(1);
+
+      await act(async () => {
+        button.click();
+      });
+
+      await waitFor(100);
+
+      expect(transportedEvents.length).toEqual(2);
+      expect(transportedEvents[0].eventName).toEqual("page_view");
+      expect(transportedEvents[1].eventName).toEqual("button_click");
+
+      expect(eventvisor.getAttributeValue("userId")).toEqual("user-123");
+      expect(eventvisor.getAttributeValue("deviceId")).toEqual("device-234");
+    } catch (error) {
+      throw error;
+    }
+  });
+});

package/src/index.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { Eventvisor } from "@eventvisor/sdk";
+import { EventName, AttributeName, Value } from "@eventvisor/types";
+
+/**
+ * Context
+ */
+export const EventvisorContext = React.createContext<Eventvisor | undefined>(undefined);
+
+/**
+ * Provider
+ */
+export interface EventvisorProviderProps {
+  instance: Eventvisor;
+  children?: React.ReactNode;
+}
+
+export function EventvisorProvider(props: EventvisorProviderProps) {
+  return (
+    <EventvisorContext.Provider value={props.instance}>{props.children}</EventvisorContext.Provider>
+  );
+}
+
+/**
+ * Hooks
+ */
+export function useInstance(): Eventvisor {
+  const instance = React.useContext(EventvisorContext);
+
+  return instance;
+}
+
+export function isReady(): boolean {
+  const instance = useInstance();
+  const [isEventvisorReady, setIsEventvisorReady] = React.useState(instance.isReady());
+
+  React.useEffect(() => {
+    instance.onReady().then(() => {
+      if (isEventvisorReady === false) {
+        setIsEventvisorReady(true);
+      }
+    });
+  }, []);
+
+  return isEventvisorReady;
+}
+
+export interface UseEventvisor {
+  instance: Eventvisor;
+  track: (eventName: EventName, value: Value) => void;
+  setAttribute: (name: AttributeName, value: Value) => void;
+  getAttributeValue: (name: AttributeName) => Value | null;
+  isAttributeSet: (name: AttributeName) => boolean;
+  removeAttribute: (name: AttributeName) => void;
+}
+
+export function useEventvisor(): UseEventvisor {
+  const instance = useInstance();
+
+  return {
+    instance,
+    track: (eventName, value) => instance.track(eventName, value),
+    setAttribute: (name, value) => instance.setAttribute(name, value),
+    getAttributeValue: (name) => instance.getAttributeValue(name),
+    isAttributeSet: (name) => instance.isAttributeSet(name),
+    removeAttribute: (name) => instance.removeAttribute(name),
+  };
+}

package/tsconfig.cjs.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.cjs.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}

package/tsconfig.esm.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.esm.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.esm.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1,90 @@
+const path = require("path");
+
+const externals = {
+  react: "react",
+};
+
+module.exports = [
+  // cjs
+  {
+    entry: {
+      "index.cjs": path.join(__dirname, "src", "index.tsx"),
+    },
+    output: {
+      path: path.join(__dirname, "dist"),
+      filename: "index.js",
+      library: "EventvisorReactSDK",
+      libraryTarget: "umd",
+      globalObject: "this",
+    },
+    mode: "production",
+    devtool: "source-map",
+    resolve: {
+      extensions: [".ts", ".tsx", ".js"],
+    },
+    externals,
+    module: {
+      rules: [
+        {
+          test: /\.(ts|tsx)$/,
+          exclude: /(node_modules)/,
+          use: [
+            {
+              loader: "ts-loader",
+              options: {
+                configFile: path.join(__dirname, "tsconfig.cjs.json"),
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    performance: {
+      hints: false,
+    },
+    optimization: {
+      minimize: true,
+      concatenateModules: false,
+    },
+  },
+
+  // esm
+  {
+    entry: path.join(__dirname, "src", "index.tsx"),
+    output: {
+      path: path.join(__dirname, "dist"),
+      filename: "index.mjs",
+      library: {
+        type: "module",
+      },
+    },
+    experiments: {
+      outputModule: true,
+    },
+    mode: "production",
+    devtool: "source-map",
+    resolve: {
+      extensions: [".ts", ".tsx", ".js"],
+    },
+    externals,
+    module: {
+      rules: [
+        {
+          test: /\.(ts|tsx)$/,
+          exclude: /(node_modules)/,
+          loader: "ts-loader",
+          options: {
+            configFile: path.join(__dirname, "tsconfig.esm.json"),
+          },
+        },
+      ],
+    },
+    performance: {
+      hints: false,
+    },
+    optimization: {
+      concatenateModules: false,
+    },
+  },
+];