Pass props to child components in slot

[terse bridge]

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

---

Yes, it is possible to pass props to child components in Astro using slots.

In Astro, you can pass children to framework components. Each framework has its own patterns for how to reference these children. For instance, React, Preact, and Solid all use a special prop named children, while Svelte and Vue use the <slot /> element.

Here is an example of how you can pass children to a React component:

---import MyReactSidebar from '../components/MyReactSidebar.jsx';---
<MyReactSidebar> 
  <p>Here is a sidebar with some text and a button.</p>
</MyReactSidebar>

You can also use Named Slots to group specific children together. For React, Preact, and Solid, these slots will be converted to a top-level prop. Slot names using kebab-case will be converted to camelCase.

Here is an example of how you can use named slots:

---import MySidebar from '../components/MySidebar.jsx';---
<MySidebar> 
  <h2 slot="title">Menu</h2> 
  <p>Here is a sidebar with some text and a button.</p> 
  <ul slot="social-links"> 
    <li><a href="<https://twitter.com/astrodotbuild">Twitter</a></li>> 
    <li><a href="<https://github.com/withastro">GitHub</a></li>> 
  </ul>
</MySidebar>

In the above example, the title and social-links slots will be passed as props to the MySidebar component.

For more information, you can refer to the Astro documentation on passing children to framework components (https://docs.astro.build/en/guides/framework-components#passing-children-to-framework-components) and named slots (https://docs.astro.build/en/basics/astro-components/#named-slots).

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