@upscopeio/react 1.0.1

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@upscopeio/react",
+  "main": "react.tsx",
+  "type": "module",
+  "dependencies": {
+    "@upscopeio/sdk": "1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "version": "1.0.1"
+}

package/react.tsx

@@ -0,0 +1,53 @@
+import type {CobrowsingSdkConfiguration} from '@upscopeio/sdk';
+import React, {ReactNode, useEffect, useRef, useState} from 'react';
+import UpscopeSDK from '@upscopeio/sdk';
+
+type Children = {children: ReactNode};
+type Props = Children & Partial<CobrowsingSdkConfiguration>;
+
+
+const UpscopeComponent: React.FC<Props> = ({children, ...props}) => {
+  const [initiated, setInitiated] = useState(false);
+  useEffect(() => {
+    if (initiated) {
+      UpscopeSDK('updateConnection', props);
+    } else {
+      UpscopeSDK('init', props);
+      setInitiated(true);
+    }
+  }, [...Object.values(props)]);
+
+  return children;
+};
+
+export default UpscopeComponent;
+
+
+export function Masked({children}: Children): ReactNode {
+  const fragmentRef = useRef<React.Fragment>(null);
+  useEffect(() => {
+    const children = fragmentRef.current?.children;
+    for (const child of children) {
+      child.__upscopeMasked = true;
+    }
+  }, [children]);
+
+  return <React.Fragment ref={fragmentRef}>
+    {children}
+  </React.Fragment>
+}
+
+
+export function NoRemoteControl({children}: Children): ReactNode {
+  const fragmentRef = useRef<React.Fragment>(null);
+  useEffect(() => {
+    const children = fragmentRef.current?.children;
+    for (const child of children) {
+      child.__upscopeNoRemoteControl = true;
+    }
+  }, [children]);
+
+  return <React.Fragment ref={fragmentRef}>
+    {children}
+  </React.Fragment>
+}