Compound Component Pattern: Creating a Reusable Card
Recently I wrote an article on advanced react patterns that you can use in your projects to create awesome reusable components. You can check out that article here.
That article was a quick intro to each of those patterns but didn’t take a deep dive into each of them. So, I wanted to write more articles on each pattern separately. In this article we will be looking at the Compound Component pattern.
I really like this pattern because once you understand it you will start to see how you can use it everywhere and you can add to it very easily.
You can do a lot with the compound component pattern and it can get complicated rather quickly. So instead of jumping into adding context and having the component manage its own state we will start out with the basics of the pattern so you can get a good grasp on it. I’ll be sure to write about using context and managing state with this pattern in another article.
If you want to skip ahead and see the final product click here.
Creating a base
To begin, we will need to create a base component. This will be the component that all other components will be the child of. Since we are creating a Card, we will go ahead and name it that.
As you can see below it mostly looks like a regular component with not much in it. We have a component called container, and we are passing in our classes that the user may gives us as well as our own. The classNames function here is a package that I use for joining class names together.
We also are spreading the rest of the props here in case users of our component need extra functionality. However, you’ll notice we are returning our children. You’ve probably seen this before but may have not used it.
This prop allows us to tell React that this component will have other components or elements that will be nested inside of it. This helps us compose components in a very flexible manner. You’ll see this over and over again as we creating our other components.
In this base component you would add all the styles you would add to a container. This allows you to contain the other components that we will add inside of it. Now that we have our base we can start adding our child components.
Adding Components
Next, in order to link the components back to our main component we will need to add them as methods to our functional component. How do we do this?
We will use dot notation to achieve this, adding whatever method we want to our card as a method and then call it later. Since it’s also a react component it could also be used outside of our Card by itself if we wanted.
This may seem confusing, however we are just taking advantage of how JavaScript works. A function can itself have other functions or methods attached to it. Then we can call those methods anytime you like. If you want to dive deeper into that topic you can read an article I wrote about that here.
You’ll notice here too that we are following a pattern where we return our element wrapping our children prop since our newly created child components could have children themselves.
Using Our Component
Now, comes the fun part. Let’s use our new component. The nice thing about our new component is that we can use as much or as little as we want in our Card component.
First we add our base Card component which is just a container for the rest of our components. Then we can add our title where place some some heading text. And then our body component where we can add our main information. And finally we add our text component which can be used as a subtitle.
We can add more components to our Card like a button or a text field and it won’t break the main component for current users which is great.
Wrapping Up
As you can see the compound component pattern is pretty awesome and powerful. It allows you to create really flexible components and gives the power of choice to your end user.
Feel free to play around with the example component here and start making your own. Hopefully this article gives you a deeper understanding of how to use this cool pattern.
