Compound component in React

Source — https://miro.medium.com/v2/0*bTWTbzMf10xI5XlD.png

What is Compound Component

Compound component is a group of child components which helps to create complex components as highly reusable.

For example if we have a requirement to create a reusable card component which can be use on multiple places and it can have a header, content and action buttons.
There can a scenario and on some place we need all those 3 sections but on some place we need only few of them not all.

Lets say in scenario 2 we don’t want to show description and action buttons and in scenario 3 we don’t want to show action buttons.

Our card component’s template looks like this.

export default function Card() {
  return (
    <div className="card">
      <div className="card-header">
        <h3>Labrador</h3>
        <div>Dog Breed</div>
      </div>

      <img
        src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqRNGjpgj_trfUKqFwEvpcq1ttRPzgmQXLNQJgKUIMS0lqDKuY"
        alt="Photo of a Shiba Inu"
      />

      <div className="card-contenr">
        <p>
          The Labrador Retriever or simply Labrador is a British breed of
          retriever gun dog. It was developed in the United Kingdom from St.
          John's water dogs imported from the colony of Newfoundland, and was
          named after the Labrador region of that colony.
        </p>
      </div>

      <div className="card-actions">
        <button>LIKE</button>
        <button>SHARE</button>
      </div>
    </div>
  );
}

To make it compound component we can can change it like below code.

import "./Card.css";

export default function Card({ children }) {
  return <div className="card">{children}</div>;
}

export function CardHeader({ children }) {
  return <div className="card-header">{children}</div>;
}

export function CartTitle() {
  return <h3>Labrador</h3>;
}

export function CartSubTitle() {
  return <div>Dog Breed</div>;
}

export function CardImage() {
  return (
    <img
      src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqRNGjpgj_trfUKqFwEvpcq1ttRPzgmQXLNQJgKUIMS0lqDKuY"
      alt="Photo of a Shiba Inu"
    />
  );
}

export function CardContent() {
  return (
    <div className="card-contenr">
      <p>
        The Labrador Retriever or simply Labrador is a British breed of
        retriever gun dog. It was developed in the United Kingdom from St.
        John's water dogs imported from the colony of Newfoundland, and was
        named after the Labrador region of that colony.
      </p>
    </div>
  );
}

export function CardActions({ children }) {
  return <div className="card-actions">{children}</div>;
}

export function CardLikeButton() {
  return <button>LIKE</button>;
}

export function CardShareButton() {
  return <button>SHARE</button>;
}

And we can use it in parent component like below code.

function App() {
  return (
    <>
      <Card>
        <CardHeader>
          <CartTitle />
          <CartSubTitle />
        </CardHeader>

        <CardImage />

        <CardContent />

        <CardActions>
          <CardLikeButton />
          <CardShareButton />
        </CardActions>
      </Card>
    </>
  );
}

export default App;

If you will run this code it will still look same.

Now for our scenario 2 where we don’t want to show description / content we can use Card component like below.

function App() {
  return (
    <>
      <Card>
        <CardHeader>
          <CartTitle />
          <CartSubTitle />
        </CardHeader>

        <CardImage />

        <CardActions>
          <CardLikeButton />
          <CardShareButton />
        </CardActions>
      </Card>
    </>
  );
}

export default App;

And it will look like this.

For our scenario 3 where we don’t want to show action button we can use Card component like below.

function App() {
  return (
    <>
      <Card>
        <CardHeader>
          <CartTitle />
          <CartSubTitle />
        </CardHeader>

        <CardImage />

        <CardContent />
      </Card>
    </>
  );
}

export default App;

And it will look like this.

So, now we don’t have to do any changes in Card component for any scenario.

This can be use to create product card where we need to show rating and other thing related to product based on requirements.

I hope you liked this article.

You can play with this code here — https://codesandbox.io/p/github/piyush303/React-Compound-Component
github — https://github.com/piyush303/React-Compound-Component