Letβs say weβre building a simple web form with a twist: we want the submit to only appear if all of the fields are valid. In all other cases, we want a simple message to the user communicating that the formβs incomplete.
How would we do that? One of the simpler ways is to use conditional rendering, but if weβre already using styled-components
, we could use the as
property to create a polymorphic component.1
What Is Polymorphism?
So, what exactly is polymorphism? Generally, itβs a biology term that means βthere are two or more possibilities of a trait or gene.β There are lots of examples. From human hemoglobin and blood types to the way more awesome: jaguar coloring (light and dark examples).2
Itβs also a common term in coding texts and itβs another example of a term Iβve read dozens of times before it finally clicked.3 The simplest definition I found for the programming variant is:
Polymorphism is an object-oriented programming concept that refers to the ability of a variable, function or object to take on multiple forms. A language that features polymorphism allows developers to program in the general rather than program in the specific.4
That is: Polymorphism allows our target to take on different shapes depending on the presence of something. In our case, that something is the value of as
.
Styled-Componentβs As Attribute
Sometimes, the two states weβre toggling between are very similar and itβs just a styling change - a blue button vs a red one.
Other times, we want the entire element to change.
In both cases, the as
prop can help.
Consider the following:
// import styled from "styled-components";
const Component = styled.div`
color: red;
`;
const StyledButton = styled.button`
color: blue;
`;
Const MyComponent = () => {
return(
<>
<Component
as={StyledButton}
onClick={() => alert('It works!')}
>
Hello World!
</Component>
<Component
as="button"
onClick={() => alert('It works!')}
>
Hello World!
</Component>
<Component
onClick={() => alert('It works!')}
>
Hello World!
</Component>
</>
);
}
The first <Component>
is a blue button
.The second <Component>
is a red button
.The third <Component>
is the default, a red div
.
And all three have an onClick
event (for accessibility purposes, the div
probably shouldnβt unless its role were set to button
, but thatβs for a different post).
Conclusion
In most cases Iβve seen the as
prop is not necessary, but simply helpful. It makes the code more readable by eliminating unnecessary lines and conditionals.
I consider the role of the as
prop in styled-components
as one which continues the trend of making it easy to conditionally update the presentation of your application. Just like styled-components provide access to props passed in to update styles, the as can be set to determine different styling paradigms. Itβs a powerful tool to have in your arsenal. Use it wisely.
Footnotes
- 1 as - Polymorphic Prop | styled-components
- 2 Polymorphism | Wikipedia
- 3 Reminiscent of my experience with Type Guards which I wrote about in the context of using Reactβs useReducer.
- 4 What is Polymorphism in Programming? - Definition from Techopedia
Top comments (1)
I'll give that a try.
Normally I give the different button a prop and then do a ternary to test if it has that prop or not, but that approach you shown sound good to me