Function App

example/withSuspense/App.tsx:14–47

()

import { getAuth } from 'firebase/auth';

export const App = () => {
  const firebaseApp = useFirebaseApp();
  const auth = getAuth(firebaseApp);

  useInitPerformance(
    async (firebaseApp) => {
      const { getPerformance } = await import('firebase/performance');
      return getPerformance(firebaseApp);
    },
    { suspense: false } // false because we don't want to stop render while we wait for perf
  );

  return (
    <div className="flex flex-wrap justify-around p-4">
        <AuthProvider sdk={auth}>
          <Card title="Authentication">
            <Auth />
          </Card>
          <Card title="Firestore">
            <Firestore />
          </Card>
          <Card title="Realtime Database">
            <RealtimeDatabase />
          </Card>
          <Card title="Remote Config">
            <RemoteConfig />
          </Card>
          <Card title="Storage">
            <Storage />
          </Card>
        </AuthProvider>
    </div>
  );
};