#global astro prop
2 messages · Page 1 of 1 (latest)
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>