Add StorageMetadata component

docs/components/StorageDownloadLink.md

@@ -14,7 +14,7 @@ const fileRef = ref(storage, "path/to/remote/file.png");
 
 <StorageDownloadLink
   reference={fileRef}
-  done={(link) => (
+  onDone={(link) => (
     <a href={link} target="_blank">A Picture of a Cat</a>
   )}
 />

docs/components/StorageMetadata.md

@@ -0,0 +1,57 @@
+---
+tags:
+  - component
+---
+
+# `StorageMetadata` Component
+
+You can use `StorageMetadata` component to render metadata for a file in Firebase Storage. The simplest usage would be:
+
+```typescript
+const fileRef = ref(storage, "path/to/remote/file.png");
+
+// ...
+
+<StorageMetadata
+  reference={fileRef}
+  onDone={(metadata) => (
+    <div>
+      <div>File name: {metadata.name}</div>
+      <div>File size: {metadata.size}</div>
+    </div>
+  )}
+/>
+```
+
+You can also define how your loading state will look like as such:
+
+```typescript
+<StorageMetadata
+  reference={docRef}
+  onLoading={() => (
+    <div>Loading...</div>
+    {/** or a spinner */}
+  )}
+  onDone={(metadata) => (
+    <div>
+      <div>File name: {metadata.name}</div>
+      <div>File size: {metadata.size}</div>
+    </div>
+  )}
+/>
+```
+
+## Input Parameters
+
+Input parameters for `StorageMetadata` component is as follows:
+
+| Name | Type | Description | Required | Default Value |
+|---|---|---|---|---|
+| `reference` | [`firebase/storage/StorageReference`][StorageReferenceRefDoc] | Reference to a document in Firestore. | ✅ | - |
+| `onDone` | `(metadata: FullMetadata) => ReactNode`[^fullmetadata] | The component to render when the process is done. | ✅ | - |
+| `onLoading` | `() => ReactNode` | The component to render while it's loading. | ❌ | An empty component. |
+
+[^fullmetadata]: Refer to [`FullMetadata`][FullMetadataRefDoc].
+
+[StorageReferenceRefDoc]: https://firebase.google.com/docs/reference/android/com/google/firebase/storage/StorageReference
+[FullMetadataRefDoc]: https://firebase.google.com/docs/reference/js/storage.fullmetadata

docs/storage/getting-metadata-of-a-file.md

@@ -2,4 +2,5 @@
 
 You can use one of the following ways the get the metadata of a file in Firebase Storage:
 
- - [`useFileMetadata` hook](../hooks/useFileMetadata.md)
+ - [`useFileMetadata` hook](../hooks/useFileMetadata.md)
+ - [`StorageMetadata` component](../components/StorageMetadata.md)

src/storage/StorageMetadata.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) 2024 Eray Erdin
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+import { FullMetadata, StorageReference } from "firebase/storage";
+import { ReactNode, useEffect } from "react";
+import { useFileMetadata } from ".";
+
+type StorageMetadataProps = {
+  reference: StorageReference;
+  onLoading?: () => ReactNode;
+  onDone: (metadata: FullMetadata) => ReactNode;
+};
+
+export const StorageMetadata = ({
+  reference,
+  onLoading = () => <></>,
+  onDone,
+}: StorageMetadataProps) => {
+  const { metadata, state, dispatch } = useFileMetadata({ reference });
+
+  useEffect(() => {
+    dispatch();
+  }, [dispatch]);
+
+  return state === "done" ? onDone(metadata!) : onLoading();
+};

src/storage/index.ts

@@ -18,3 +18,5 @@ export * from "./useDownloadBytes";
 export * from "./useDeleteFile";
 
 export * from "./useFileMetadata";
+
+export * from "./StorageMetadata";