Creating a Flexible Astro Component

[@myntsu]

You're teaching me so much about Astro. You inspire me to help others as well. Keep them coming!

[@CodinginPublic]

So glad you’ve enjoyed the content! More coming next week!!

[@mattythebatty1]

🎯 Key Takeaways for quick navigation: 00:00 🌟 Astro combines static HTML simplicity with dynamic flexibility. 03:33 🧩 Astro components allow prop customization and reusability. 08:17 🎨 Use slots for content in Astro components. 13:08 🔄 Dynamically add classes with `classlist` in Astro. 15:57 📜 Spread HTML attributes using `...rest` for flexibility. 17:50 🎨 Define variables in front matter for dynamic CSS in Astro. 19:41 🧩 Pass CSS variables with the `Define vars` feature. 20:21 📐 Set default styles with CSS variables for theme-based adaptability. 22:38 📏 Use relative units like `em` for dynamic padding. 23:36 🖱️ Add interactivity to Astro components with JavaScript. 32:12 🚀 Enhance Astro components with TypeScript for auto-completion and type safety. Made with HARPA AI

[@phucnguyen0110]

Yes, there we go! Lovely to see another developer tackling this subject :D (Shoutout to Mr. Kevin Powell aka The CSS King)

[@CodinginPublic]

Glad you enjoyed it! Did Kevin do something on an Astro button?

[@phucnguyen0110]

@@CodinginPublic he basically did a video exploring components in Astro, Chris. Not buttons specifically => watch?v=acgIGT0J99U

[@ericmcgray6464]

Still very useful for a newbie like me i use to change the HTMLAttributes to HTMLAttributes to make it work

[@toppirl]

Really starting to enjoy learning Astro and only got started because of your videos! Thanks for the great video as always

[@CodinginPublic]

That’s so encouraging to hear! Thanks for taking the time to comment!

[@MarcKronberg]

Danke!

[@CodinginPublic]

Wow! Marc! Thank you so much!

[@hamza201183]

Many thanks! Is there a way to encapsulate the 'onClick' logic inside the button? Instead of a query-selector and a script tag outside of the button...

[@CodinginPublic]

It's possible, but I've found it's cleaner to have in-line scripts for these items. I've changed my pattern here for components. I'd definitely use a slot these days. In that case, you could fairly easily have a slot for a script that could run whatever function you needed. Hopefully that makes sense?

[@dharyelsantoshonorio5890]

@@CodinginPublic can you detail more how to do it?

[@lvekua]

Awesome guide Chris! Typescript was cherry on top. Thank you! ❤

[@CodinginPublic]

Glad it was a help! Thanks for taking the time to say something!

[@fallen_turbo]

Your astro course is amazing

[@CodinginPublic]

So glad you enjoyed it!

[@BG-xu8be]

Amazing stuff, a real master class tutorial, thank you!

[@CodinginPublic]

So glad you found it helpful!

[@felipegutierrez2944]

Awesome content as always! keep the good work!

[@CodinginPublic]

Glad you liked it!

[@MaximeOnDev]

Love exploring astro with you ! 🙌 I was wondering what's the avantages to use astro with react ? Since react and astro are based on component , how to use astro and react together then ?

[@CodinginPublic]

I think for me, it comes down to complexity. If the UI/UX required is complex, it's likely worth it to load react (or if it's behind auth). Otherwise, I tend towards vanilla JS and Astro components. Does that help?

[@latch909]

Fantastic - `class:list` so helpful!

[@CodinginPublic]

Agreed! They did make some small changes to it recently so that it now uses CLSX. That basically just means you can't use sets, I think? But still basically the same and super helpful!

[@realJZ]

What is the terminal/shell you are using? I would like to know how you have "intellisense" like menu for folders

[@CodinginPublic]

The autocomplete is a tool called Fig! At fig.io :)

[@johnner5735]

My first time learning Astro =)

[@CodinginPublic]

It's awesome!

[@moneyfr]

amazing i learned so much but what about the accesibility ?

[@CodinginPublic]

Awesome! Well, that’s the cool thing. Since we spread in the …rest, you can add an aria-label=“whatever” and it’ll get added to the button! So that should handle most all of your accessibility needs with a button!

[@MarcKronberg]

Super Thanks!

[@CodinginPublic]

That's very kind, Mark!

[@DanteMishima]

This is cool.... But what happened to your other video Chris?

[@CodinginPublic]

I published it too early :) It'll be back up Friday!

[@DanteMishima]

@@CodinginPublic I had my editor ready to follow along, then boom gone 😂

[@phucnguyen0110]

@@CodinginPublic Yes, I was wondering about that too lol - okay, noted that on Friday then.

[@CodinginPublic]

@@DanteMishima Sorry! It's up now here: kzbin.info/www/bejne/rZzbgaN9jaaim9U

[@CodinginPublic]

@@phucnguyen0110 Sorry! It's up now here: kzbin.info/www/bejne/rZzbgaN9jaaim9U

[@LeandroVilanovaDev]

10/10

[@CodinginPublic]

Glad you enjoyed it!

[@viophile]

I would use a CSS library such as Bulma instead.

[@CodinginPublic]

Yep, same principles apply!

[@robertostringa9254]

Why so many props for a component that could easily be CSS classes ? I don't see its usefulness.

[@CodinginPublic]

I don't remember all the choices I made here, but looking at the code, I agree with you. I'm wondering if I was just trying to show different options? But I think I'd tend to just use classes here.