Rename event handlers

docs/components/FirestoreDocument.md

@@ -14,7 +14,7 @@ const docRef = doc(firestore, "yourCollection", "docId");
 
 <FirestoreDocument
   reference={docRef}
-  done={(snapshot) => {
+  onDone={(snapshot) => {
     const id = snapshot.id;
     const data = snapshot.data();
 
@@ -32,14 +32,14 @@ You can also define how your loading and error states will look like as such:
 ```typescript
 <FirestoreDocument
   reference={docRef}
-  loading={() => {
+  onLoading={() => {
     return <div>Loading...</div>
   }}
-  error={(error) => {
+  onError={(error) => {
     // error: FirebaseError
     return <div>{error.code}</div>
   }}
-  done={(snapshot) => {
+  onDone={(snapshot) => {
     // return a component when it's done
   }}
 />
@@ -50,9 +50,9 @@ Or, in a shorter syntax:
 ```typescript
 <FirestoreDocument
   reference={docRef}
-  loading={() => (<div>Loading...</div>)}
-  error={(error) => (<div>{error.code}</div>)}
-  done={(snapshot) => {
+  onLoading={() => (<div>Loading...</div>)}
+  onError={(error) => (<div>{error.code}</div>)}
+  onDone={(snapshot) => {
     // return a component when it's done
   }}
 />
@@ -64,9 +64,9 @@ You can also listen to real-time changes in Firestore using `listen`:
 <FirestoreDocument
   reference={docRef}
   listen
-  loading={() => (<div>Loading...</div>)}
-  error={(error) => (<div>{error.code}</div>)}
-  done={(snapshot) => {
+  onLoading={() => (<div>Loading...</div>)}
+  onError={(error) => (<div>{error.code}</div>)}
+  onDone={(snapshot) => {
     // return a component when it's done
   }}
 />
@@ -79,10 +79,10 @@ Input parameters for `FirestoreDocument` component is as follows:
 | Name | Type | Description | Required | Default Value |
 |---|---|---|---|---|
 | `reference` | [`firebase/firestore/DocumentReference`][DocumentReferenceRefDoc] | Reference to a document in Firestore. | ✅ | - |
-| `done` | `(snapshot: DocumentSnapshot) => ReactNode`[^1] | The component to render when the process is done. | ✅ | - |
+| `onDone` | `(snapshot: DocumentSnapshot) => ReactNode`[^1] | The component to render when the process is done. | ✅ | - |
 | `listen` | `boolean` | Whether to listen to realtime changes of the document or not. | ❌ | `false` |
-| `loading` | `() => ReactNode` | The component to render while it's loading. | ❌ | An empty component |
-| `error` | `(error: FirebaseError) => ReactNode`[^2] | The component to render when a Firebase error occurs. | ❌ | An empty component |
+| `onLoading` | `() => ReactNode` | The component to render while it's loading. | ❌ | An empty component |
+| `onError` | `(error: FirebaseError) => ReactNode`[^2] | The component to render when a Firebase error occurs. | ❌ | An empty component |
 
 !!! note
     `listen` is `false` by default to prevent unnecessary READ queries from Firestore.

src/firestore/FirestoreDocument.test.tsx

@@ -21,8 +21,8 @@ describe("initially FirestoreDocument component", () => {
     render(
       <FirestoreDocument
         reference={docRef}
-        loading={() => <div>Loading...</div>}
-        done={() => <></>}
+        onLoading={() => <div>Loading...</div>}
+        onDone={() => <></>}
       />,
     );
     expect(screen.getByText("Loading...").innerHTML).toBe("Loading...");
@@ -39,8 +39,8 @@ describe("later FirestoreDocument component", () => {
     render(
       <FirestoreDocument
         reference={docRef}
-        loading={() => <div>Loading...</div>}
-        done={(snapshot) => <div>{snapshot.data()?.displayName}</div>}
+        onLoading={() => <div>Loading...</div>}
+        onDone={(snapshot) => <div>{snapshot.data()?.displayName}</div>}
       />,
     );
     await sleep(250);

src/firestore/FirestoreDocument.tsx

@@ -10,18 +10,18 @@ import { useDocument } from ".";
 
 type FirestoreDocumentProps = {
   reference: DocumentReference;
-  loading?: () => ReactNode;
-  error?: (error: FirebaseError) => ReactNode;
-  done: (snapshot: DocumentSnapshot) => ReactNode;
+  onLoading?: () => ReactNode;
+  onError?: (error: FirebaseError) => ReactNode;
+  onDone: (snapshot: DocumentSnapshot) => ReactNode;
   listen?: boolean;
 };
 
 export const FirestoreDocument = ({
   reference,
-  loading = () => <></>,
+  onLoading = () => <></>,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  error = (_err) => <></>,
-  done,
+  onError = (_err) => <></>,
+  onDone,
   listen = false,
 }: FirestoreDocumentProps) => {
   const {
@@ -30,5 +30,5 @@ export const FirestoreDocument = ({
     error: err,
   } = useDocument({ reference, options: { listen } });
 
-  return processing ? loading() : err ? error(err) : done(snapshot!);
+  return processing ? onLoading() : err ? onError(err) : onDone(snapshot!);
 };