Update react api jsdoc example

tonybaroneee · tonybaroneee · commit 0523014382ae · 2025-12-12T02:14:42.000Z
diff --git a/docs-devsite/telemetry_react.md b/docs-devsite/telemetry_react.md
@@ -56,11 +56,35 @@ The default [Telemetry](./telemetry_.telemetry.md#telemetry_interface) instance
 ### Example
 
 
-```html
-<body>
- <FirebaseTelemetry firebaseApp={app} />
- ... my app ...
-</body>
+```tsx
+import { useEffect, useState } from "react";
+import { FirebaseTelemetry } from "@firebase/telemetry/react";
+import { FirebaseApp, initializeApp } from "@firebase/app";
+
+export default function MyApp() {
+  const [app, setApp] = useState<FirebaseApp | null>(null);
+
+  useEffect(() => {
+    if (getApps().length === 0) {
+      const newApp = initializeApp({...});
+      setApp(newApp);
+    } else {
+      setApp(getApp());
+    }
+  }, []);
+
+  return (
+    <>
+      {app && (
+        <FirebaseTelemetry
+          firebaseApp={app}
+          telemetryOptions={{...}}
+        />
+      )}
+      ...
+    </>
+  );
+}
 
 ```
 
diff --git a/packages/telemetry/src/angular/index.ts b/packages/telemetry/src/angular/index.ts
@@ -81,10 +81,7 @@ export class FirebaseErrorHandler implements ErrorHandler {
   private readonly router = inject(Router);
   private readonly telemetry: Telemetry;
 
-  constructor(
-    app: FirebaseApp,
-    telemetryOptions?: TelemetryOptions
-  ) {
+  constructor(app: FirebaseApp, telemetryOptions?: TelemetryOptions) {
     this.telemetry = getTelemetry(app, telemetryOptions);
   }
 
diff --git a/packages/telemetry/src/react/index.ts b/packages/telemetry/src/react/index.ts
@@ -32,11 +32,35 @@ export * from '../public-types';
  * implicitly caught by Error Boundaries, will not be captured by this component.
  *
  * @example
- * ```html
- * <body>
- *  <FirebaseTelemetry firebaseApp={app} />
- *  ... my app ...
- * </body>
+ * ```tsx
+ * import { useEffect, useState } from "react";
+ * import { FirebaseTelemetry } from "@firebase/telemetry/react";
+ * import { FirebaseApp, initializeApp } from "@firebase/app";
+ *
+ * export default function MyApp() {
+ *   const [app, setApp] = useState<FirebaseApp | null>(null);
+ *
+ *   useEffect(() => {
+ *     if (getApps().length === 0) {
+ *       const newApp = initializeApp({...});
+ *       setApp(newApp);
+ *     } else {
+ *       setApp(getApp());
+ *     }
+ *   }, []);
+ *
+ *   return (
+ *     <>
+ *       {app && (
+ *         <FirebaseTelemetry
+ *           firebaseApp={app}
+ *           telemetryOptions={{...}}
+ *         />
+ *       )}
+ *       ...
+ *     </>
+ *   );
+ * }
  * ```
  *
  * @param firebaseApp - The {@link @firebase/app#FirebaseApp} instance to use.
