From 32229f993af6a1f127a943f3af2972dbb198247c Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 16 Jul 2023 22:11:18 +0200
Subject: [PATCH] chore: add example for passing all Astro.props

---
 README.md | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 3c68b69..ddef050 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Utilities for serializing data from server for use in the client.
 1. `Serialize` Astro component takes `id` and `data`
 1. `deserialize(id: string): Object` function for use int he client takes an `id` string and returns the `data` as Object
 
-## Installation & Usage
+## Installation & Examples
 
 ### Install via npm
 
@@ -61,9 +61,9 @@ export type Data = typeof data;
 
 	/**
 	* reuse the type in the client
-	* assuming this component's name is `Component.astro`
+	* assuming this component's name is `ThisComponent.astro`
 	*/
-	import type {Data} from './Component.astro';
+	import type {Data} from './ThisComponent.astro';
 
 	const data = deserialize<Data>('my-data');
 
@@ -71,6 +71,29 @@ export type Data = typeof data;
 </script>
 ```
 
+### Passing all Astro.props to client
+
+If you need to make all the component props to the client script:
+
+```astro
+---
+import Serialize from "@ayco/astro-resume";
+export interface Props {
+	hello: string;
+	isOkay: boolean;
+}
+---
+
+<Serialize id="preferences" data={{...Astro.props}} />
+
+<script>
+	import {deserialize} from '@ayco/astro-resume';
+	import type {Props} from './ThisComponent.astro';
+	const {hello, isOkay} = deserialize<Props>('preferences');
+	console.log(hello, isOkay);
+</script>
+```
+
 ## Reporting Issues
 
 To report issues or request features, send a plain text email to [~ayoayco/astro-resume@todo.sr.ht](mailto:~ayoayco/astro-resume@todo.sr.ht) or file a ticket via [SourceHut](https://todo.sr.ht/~ayoayco/astro-resume)