Real-world examples of polymorphic components
Real-world examples of polymorphic components 관련
There’s a nonzero chance you’ve already used a polymorphic component. Open source component libraries typically implement some sort of polymorphic component.
Let’s consider some you may be familiar with: the Chakra UI as prop and MUI component prop.
Chakra UI’s as prop
f 
How does Chakra UI implement polymorphic props? The answer is by exposing an as prop. The as prop is passed to a component to determine what container element it should eventually render.
All you need to do to use the as prop is pass it to the component, which in this case is Box:
<Box as='button' borderRadius='md' bg='tomato' color='white' px={4} h={8}>
Button
</Box>
Now, the component will render a button element.
If you changed the as prop to a h1:
<Box as="h1"> Hello </Box>
Now, the Box component renders a h1:
That’s a polymorphic component at work! It can be rendered to entirely unique elements, all by passing down a single prop.
MUI’s component prop
Similar to Chakra UI, MUI allows for a polymorphic prop called component, which is implemented similarly: you pass it to a component and state the element or custom component you’d like to render.
Here’s an example from the official docs:
<List component="nav">
<ListItem button>
<ListItemText primary="Trash" />
</ListItem>
</List>
List is passed a component prop of nav; when this is rendered, it’ll render a nav container element.
Another user may use the same component, but not for navigation; instead, they may want to render a to-do list:
<List component="ol">
...
</List>
And in this case, List will render an ordered list ol element.
Talk about flexibility! See a summary of the use cases (ohansemmanuel/polymorphic-react-component) for polymorphic components.
As you’ll come to see in the following sections of this article, polymorphic components are powerful. Apart from just accepting a prop of an element type, they can also accept custom components as props.
This will be discussed in a coming section of this article. For now, let’s get building our first polymorphic component!