Add a StorageImage component (#182)

Author: jhuleatt

docs/reference.md

@@ -23,6 +23,8 @@
     - [`SuspenseWithPerf`](#SuspenseWithPerf)
   - Authentication
     - [`AuthCheck`](#AuthCheck)
+  - Cloud Storage
+    - [`StorageImage`](#StorageImage)
 - [ReactFireOptions](#ReactFireOptions)
 
 ## Providers
@@ -197,6 +199,19 @@ Renders `children` if a user is signed in and meets the required claims. Renders
 | fallback       | React.Component |
 | requiredClaims | Object          |
 
+### `StorageImage`
+
+Renders an image based on a Cloud Storage path.
+
+#### Props
+
+| Property    | Type                     |
+| ----------- | ------------------------ |
+| storagePath | string                   |
+| storage?    | firebase.storage.Storage |
+
+...and any other props a normal React `<img>` element can take.
+
 ### `SuspenseWithPerf`
 
 Starts a Firebase Performance Monitoring [trace](https://firebase.google.com/docs/reference/js/firebase.performance.Trace) and ends it when suspense stops suspending.

reactfire/storage/index.tsx

@@ -1,7 +1,8 @@
+import * as React from 'react';
 import { storage } from 'firebase/app';
 import { getDownloadURL } from 'rxfire/storage';
 import { Observable } from 'rxjs';
-import { ReactFireOptions, useObservable } from '..';
+import { ReactFireOptions, useObservable, useFirebaseApp } from '..';
 
 /**
  * modified version of rxFire's _fromTask
@@ -59,3 +60,23 @@ export function useStorageDownloadURL<T = string>(
     options ? options.startWithValue : undefined
   );
 }
+
+type StorageImageProps = {
+  storagePath: string;
+  storage?: firebase.storage.Storage;
+};
+
+export function StorageImage(
+  props: StorageImageProps &
+    React.DetailedHTMLProps<
+      React.ImgHTMLAttributes<HTMLImageElement>,
+      HTMLImageElement
+    >
+) {
+  let { storage, storagePath, ...imgProps } = props;
+
+  storage = storage || useFirebaseApp().storage();
+
+  const imgSrc = useStorageDownloadURL(storage.ref(storagePath));
+  return <img src={imgSrc} {...imgProps} />;
+}

sample-simple/src/Storage.js

@@ -4,28 +4,12 @@ import '@firebase/performance';
 import React, { useState } from 'react';
 import {
   SuspenseWithPerf,
-  useStorageDownloadURL,
   useStorageTask,
   useFirebaseApp,
-  AuthCheck
+  AuthCheck,
+  StorageImage
 } from 'reactfire';
 
-const DownloadImage = () => {
-  const demoImagePath = 'Cloud Storage for Firebase (Independent Icon).png';
-  const firebaseApp = useFirebaseApp();
-  const ref = firebaseApp.storage().ref(demoImagePath);
-
-  const downloadURL = useStorageDownloadURL(ref);
-
-  return (
-    <img
-      src={downloadURL}
-      alt="demo download"
-      style={{ width: '200px', height: '200px' }}
-    />
-  );
-};
-
 const UploadProgress = ({ uploadTask, storageRef }) => {
   const { bytesTransferred, totalBytes } = useStorageTask(
     uploadTask,
@@ -82,7 +66,11 @@ const SuspenseWrapper = props => {
   return (
     <SuspenseWithPerf fallback="loading..." traceId="storage-root">
       <AuthCheck fallback="sign in to use Storage">
-        <DownloadImage />
+        <StorageImage
+          storagePath="Cloud Storage for Firebase (Independent Icon).png"
+          alt="demo download"
+          style={{ width: '200px', height: '200px' }}
+        />
         <br />
         <ImageUploadButton />
       </AuthCheck>