Unveiling the Hidden Gem of React: The Power of Compound Components

Introducing Compound Components: a transformative approach revolutionizing the development of design systems with a heightened focus on developer experience. In today's development landscape, where developer satisfaction is paramount, Compound Components offer unparalleled flexibility and streamline workflows within React applications.

Thanks

Before delving into the heart of the matter, I'd like to extend my heartfelt thanks to Tristan 🫶 from Ornikar 🚗 for introducing me to Compound Components. I greatly appreciate his insight into this fascinating aspect of React development. Thank you, Tristan, for this discovery!

Unleash Innovation in Design Systems

Prepare to embark on a journey into the heart of React's hidden gem: Compound Components. This captivating concept isn't just another tool in the developer's arsenal—it's a game-changer for design systems. By empowering developers with the ability to craft modular, customizable interfaces, Compound Components redefine the boundaries of what's possible in modern web development.

But what is this ?

Imagine you're building a house. Rather than stacking bricks haphazardly, you create modular parts that fit together harmoniously to form a coherent whole. With Compound Components, you're not just assembling UI elements—you're orchestrating an immersive user and developer experience. Each component serves as a building block, seamlessly integrating with its counterparts to create cohesive, dynamic interfaces.

Understanding Compound Components with examples

To truly grasp the power of Compound Components, let's compare examples with and without their utilization. We'll explore how Compound Components streamline development and enhance code organization.

Imagine a Modal where the header, the body and the footer is customizable :

Without Compound Components

1export const Modal = ({ header, body, footer }) => {
2  return (
3    <div className="modal">
4      <div className="modal-header">{header}</div>
5      <div className="modal-body">{body}</div>
6      <div className="modal-footer">{footer}</div>
7    </div>
8  );
9}

In this approach, we've coded a component just for its style and to implement a precise layout. Now if we want to use it, it will look like this :

1<Modal
2  header={<header>My title</header>}
3  body={
4    <div>
5      <bold>My bold element</bold>
6      <p>
7        My text <span>with a span</span>
8      </p>
9    </div>
10  }
11  footer={
12    <footer>
13      <div>Element1</div>
14      <div>Element2</div>
15      <a href="#">My link</a>
16    </footer>
17  }
18/>

You can see that in terms of developer experience, it's not great. It's heavy, it's ugly!

With Compound Components

Now, let's see how Compound Components offer a more flexible solution:

1export const Modal = ({ children }) => {
2  return (
3    <div className="modal">
4      {children}
5    </div>
6  );
7}
8
9Modal.Header = ({ children }) => {
10  return (
11    <div className="modal-header">{CHILDREN}</div>
12  )
13}
14
15Modal.Body = ({ children }) => {
16  return (
17    <div className="modal-body">{children}</div>
18  )
19}
20
21Modal.Footer = ({ children }) => {
22  return (
23    <div className="modal-footer">{children}</div>
24  )
25}

Now if you want to use your modal, you can use it like this :

1<Modal>
2  <Modal.Header>Title of the Modal</Modal.Header>
3  <Modal.Body>Content of the Modal</Modal.Body>
4  <Modal.Footer>
5    <button onClick={closeModal}>Close</button>
6  </Modal.Footer>
7</Modal>

And you can choose whether or not to use certain elements :

1<Modal>
2  <Modal.Header>Title of the Modal</Modal.Header>
3  <Modal.Body>Content of the Modal</Modal.Body>
4</Modal>

By composing these Compound Components, we create a modal that's highly customizable and easily maintainable. Any changes to the modal structure, styling, or functionality can be made by simply adjusting the components' arrangement or adding/removing components, without touching their implementation details.

Conclusion

In conclusion, Compound Components provide a superior approach to building modular and customizable interfaces compared to traditional methods. By decoupling structure from implementation, Compound Components offer enhanced flexibility, code organization, and reusability. Incorporate Compound Components into your React projects to unlock their full potential and streamline your development workflow.