Polymorphic Components
Learn how to create an adaptable Box component for diverse HTML block elements.
We'll cover the following
A polymorphic component is designed to be rendered as different HTML elements or components while maintaining the same properties and behaviors. It allows us to specify a prop to determine its rendered element type.
Creating the Box
component
Earlier, we told you that, over the course of building out a large application, we tend to end up making a few wrappers around components. Box
is the first wrapper around the basic block elements in HTML (such as <div>
, <aside>
, <section>
, <article>
, <main>
, <head>
, and so on). But just as we don’t want to lose all the semantic meaning we get from these tags, we also don’t need multiple variations of Box
that are the same. What we’d like to do is use Box
but also be able to specify what it ought to be under the hood.
Here’s an example of a Box
component from
Get hands-on with 1200+ tech skills courses.