Skip to content

Astro Props

New Course Coming Soon:

Get Really Good at Git

You might be familiar with the concept of props from a modern JavaScript framework like React, or Vue or Svelte.

NOTE: I wrote about all of those in the past, and you can find my articles on React Props, Vue Props and Svelte Props.

Props are the way we can pass information to components. This includes variables, but also functions.

Astro components also support props.

Here’s how to use them.

Suppose you define a Hello component in src/components/Hello.astro:


You can pass a name prop to the component when you use it, like this: <Hello name="Flavio" />, and you can display the name in your component output by using this syntax:

<p>Hello {}!</p>

It’s common to extract the props to individual variables with object destructuring in the component’s frontmatter section, which is nice when you have complex components:

const { name } = Astro.props
<p>Hello {name}!</p>

Here’s how to work with multiple props, to support for example this usage: <Hello name="Flavio" message="Welcome" />

const { name, message } = Astro.props
<p>{message} {name}!</p>

And in this way you can support defaults for props that might be unset:

const { name = '', message = 'Hello' } = Astro.props
<p>{message} {name}!</p>
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Read my Astro Tutorial on The Valley of Code

Here is how can I help you: