wip

packages/sdks/nextjs/reactive.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import type { IdentifyPayload } from '@openpanel/web';
+import { useEffect, useRef } from 'react';
+import { useOpenPanel } from './hook';
+
+const fastJsonEqual = (a: unknown, b: unknown) => {
+  if (typeof a !== 'object' || typeof b !== 'object') {
+    return a === b;
+  }
+
+  return JSON.stringify(a) === JSON.stringify(b);
+};
+
+export function ReactiveProfile(props: IdentifyPayload) {
+  const op = useOpenPanel();
+  const prev = useRef<IdentifyPayload | undefined>(props);
+
+  useEffect(() => {
+    if (
+      props.profileId !== prev.current?.profileId ||
+      props.firstName !== prev.current?.firstName ||
+      props.lastName !== prev.current?.lastName ||
+      props.email !== prev.current?.email ||
+      props.avatar !== prev.current?.avatar ||
+      !fastJsonEqual(props.properties, prev.current?.properties)
+    ) {
+      op.identify(props);
+      prev.current = props;
+    }
+  }, [props]);
+
+  return null;
+}