useAnalytics missing in ReactFire v4 #429 (#431)

* add declaration of useAnalytics

* add an example for Analytics

* update docs/use.md for reactfire 4.0 and firebase 9.0 on Log Page Views to Google Analytics for Firebase with React Router

* Update docs/use.md

Co-authored-by: Jeff <3759507+jhuleatt@users.noreply.github.com>

* Update docs/use.md

Co-authored-by: Jeff <3759507+jhuleatt@users.noreply.github.com>

* Update example/withoutSuspense/Analytics.tsx

Co-authored-by: Jeff <3759507+jhuleatt@users.noreply.github.com>

* regenerate reference docs

Co-authored-by: Jeff <3759507+jhuleatt@users.noreply.github.com>

Author: shiiinji

docs/reference/modules/index.md

@@ -424,32 +424,35 @@ function App() {
 ## Log Page Views to Google Analytics for Firebase with React Router
 
 ```jsx
-import { useAnalytics } from 'reactfire';
+import { AnalyticsProvider, useAnalytics } from 'reactfire';
 import { Router, Route, Switch } from 'react-router';
+import { getAnalytics, logEvent } from 'firebase/analytics'
 
 function MyPageViewLogger({ location }) {
   const analytics = useAnalytics();
 
   // By passing `location.pathname` to the second argument of `useEffect`,
   // we only log on first render and when the `pathname` changes
   useEffect(() => {
-    analytics.logEvent('page-view', { path_name: location.pathname });
-  }, [location.pathname]);
+    logEvent(analytics, 'page_view', { page_location: location.href });
+  }, [location.href]);
 
   return null;
 }
 
 function App() {
-  const analytics = useAnalytics();
+  const app = useFirebaseApp()
 
   return (
-    <Router>
-      <Switch>
-        <Route exact path="/about" component={<AboutPage />} />
-        <Route component={<NotFoundPage />} />
-      </Switch>
-      <MyPageViewLogger />
-    </Router>
+    <AnalyticsProvider sdk={getAnalytics(app)}>
+      <Router>
+        <Switch>
+          <Route exact path="/about" component={<AboutPage />} />
+          <Route component={<NotFoundPage />} />
+        </Switch>
+        <MyPageViewLogger />
+      </Router>
+    </AnalyticsProvider>
   );
 }
 ```

docs/reference/modules/sdk.md

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { AnalyticsProvider, useFirebaseApp, useAnalytics } from 'reactfire';
+import { getAnalytics, logEvent } from 'firebase/analytics'
+
+
+function MyPageViewLogger() {
+  const analytics = useAnalytics()
+
+  React.useEffect(() => {
+      logEvent(analytics, 'page_view', { page_location: location.href });
+    }, [location.href])
+
+  return null
+}
+
+export function Analytics() {
+  const app = useFirebaseApp();
+  return (
+      <AnalyticsProvider sdk={getAnalytics(app)}>
+        <MyPageViewLogger />
+      </AnalyticsProvider>
+  );
+}

docs/use.md

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AuthProvider, useFirebaseApp, useInitPerformance } from 'reactfire';
 import { Card } from '../display/Card';
+import { Analytics } from './Analytics'
 import { Auth } from './Auth';
 import { Firestore } from './Firestore';
 import { RealtimeDatabase } from './RealtimeDatabase';
@@ -39,6 +40,7 @@ export const App = () => {
           <Storage />
         </Card>
       </AuthProvider>
+      <Analytics />
     </div>
   );
 };