chore: add example for passing all Astro.props
This commit is contained in:
parent
1804904dd3
commit
32229f993a
1 changed files with 26 additions and 3 deletions
29
README.md
29
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)
|
||||
|
|
Loading…
Reference in a new issue