Skip to content

Commit

Permalink
[add] Astro.props added to config (withastro#1200)
Browse files Browse the repository at this point in the history
Co-authored-by: Chris Swithinbank <[email protected]>
  • Loading branch information
sarah11918 and delucis authored Aug 7, 2022
1 parent 4704b43 commit 1515a3f
Showing 1 changed file with 27 additions and 0 deletions.
27 changes: 27 additions & 0 deletions src/pages/en/reference/api-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,33 @@ const posts = await Astro.glob<Frontmatter>('../pages/post/*.md');
</ul>
```

### `Astro.props`

`Astro.props` is an object containing any values that have been passed as [component attributes](/en/core-concepts/astro-components/#component-props). Layout components for `.md` and `.mdx` files receive frontmatter values as props.

```astro {3}
---
// ./src/components/Heading.astro
const { title, date } = Astro.props;
---
<div>
<h1>{title}</h1>
<p>{date}</p>
</div>
```

```astro /title=".+"/ /date=".+"/
---
// ./src/pages/index.astro
import Heading from '../components/Heading.astro';
---
<Heading title="My First Post" date="09 Aug 2022" />
```

📚 Learn more about how [Markdown and MDX Layouts](/en/guides/markdown-content/#frontmatter-layout) handle props.

📚 Learn how to add [Typescript type definitions for your props](/en/guides/typescript/#component-props).

#### Astro Files

Astro files have the following interface:
Expand Down

0 comments on commit 1515a3f

Please sign in to comment.