Polymorphic Presentations With Styled-Components

#styledcomponents #polymorphic #css

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.¹

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).²

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.³ 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.⁴

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.