#global astro prop

2 messages · Page 1 of 1 (latest)

vivid vaporBOT
#

Hi @sterile pumice. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, Astro doesn't seem to support the creation of global props directly. Props in Astro are typically defined and used within the scope of individual components. They are passed to components as attributes and become available to the component template for rendering HTML. These props are available on the Astro.props global in your frontmatter script.

Here is an example of a component that receives a greeting prop and a name prop:

---
const { greeting, name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

This component, when imported and rendered in other Astro components, layouts or pages, can pass these props as attributes.

You can also define your props with TypeScript with a Props type interface. Astro will automatically pick up the Props interface in your frontmatter and give type warnings/errors. These props can also be given default values when destructured from Astro.props.

---
interface Props { name: string; greeting?: string;}
const { greeting = "Hello", name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

For more information, you can refer to the Astro documentation (https://docs.astro.build/en/core-concepts/astro-components#component-props).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: