Polymorphic as prop in Astro
Astro has dynamic tags — a way to take an element or component as a prop.
I had trouble finding the feature because the React community calls this pattern the “polymorphic as prop”. Because we enjoy our pseudo-computer-science bullshit artisinally.
Dynamic tags are simple to implement in Astro.
- Take a capitalized
Elementprop as a local variable.
- Render that prop as a template tag.
- Take and spread rest-props.
- Render children using Astro’s un-named
Uppercase prop names can look out of place in templates.
Destructure and rename the
Element prop in one to provide a more ergonomic/conventional authoring experience.
Astro templates require that dynamic tags be capitalized. Renaming the element prop is a convent way to follow that requirement while providing a more conventional API to consumers.
Astro has a
class:list directive for orchestrating dynamic classes.
class:list directive an array with both provided and component classes.
class:list is smart and automatically removes duplicate classes.
class needs to be renamed when destructured because values can not be assigned to reserved words.
This is my completed component, with the TypeScript interface.
Yours needs will likely vary.
Astro provides client directives for hydrating client-side UI. Those don’t work with dynamic tags.
If you’re using dynamic tags for static layouts — like me — this isn’t an issue.
Astro supports the “polymorphic as prop” pattern popular in React.
And the additional standard tooling of TypeScript and
class:list directive make it even easier to consistently implement.