Money Forward Developers Blog

Unveiling the Power of the React Compound Component Pattern

In the world of front-end development, React shines as a top-tier JavaScript library. Its component-based structure makes UI development easier by breaking down intricate interfaces into reusable pieces. Among React’s many design patterns, the Compound Component Pattern stands out as a powerful method for crafting flexible, composable, and reusable components. In this blog post, we’ll dive into the Compound Component Pattern, exploring its concepts, advantages, and how to implement it with code examples.

In React projects, whether they’re large or small, it’s common to have a UI section that’s used everywhere. To avoid redundancy and stick to the DRY principle, we create a generic UI component that can be used throughout the project. The recommended approach is to implement this as a React Compound Component pattern.

Understanding the Compound Component Pattern

At its core, the Compound Component Pattern enables the creation of components composed of multiple interconnected parts. Unlike traditional React components where each piece operates independently, compound components work together seamlessly to achieve a unified functionality. This pattern promotes encapsulation, separation of concerns, and an enhanced developer experience.

alt text

Image source

Benefits of the Compound Component Pattern

  1. Clear Separation of Concerns: Compound components divide the UI logic into smaller, focused units, enhancing code organization and maintainability.
  2. Flexible Composition: By allowing consumers to customize and compose components according to their needs, the Compound Component Pattern promotes code reusability and scalability.
  3. Improved Developer Experience: With well-defined APIs and clear communication channels between components, developers can work collaboratively and efficiently, leading to faster development cycles and fewer bugs.

Implementing the Compound Component Pattern

We will illustrate the Compound Component Pattern with a practical example. As you can see in the image below, there are different types of Card views. This Card is a widely used UI pattern. To showcase its power and versatility, we will design a Card component using the Compound Component Pattern.

alt text

To begin, we need to create a file called Card.tsx. Just a heads up, we will be using React with TypeScript.

// Card.tsx
import React from 'react';

type IProps {
    children: React.ReactNode,
}

export const Card = ({ children, ...rest }: IProps) => {
  return <div className="card" {...rest}>{children}</div>;
};

const CardHeader = ({ children, ...rest }: IProps) => {
  return <div className="card-header" {...rest}>{children}</div>;
};

const CardBody = ({ children, ...rest }: IProps) => {
  return <div className="card-body" {...rest}>{children}</div>;
};

const CardFooter = ({ children, ...rest }: IProps) => {
  return <div className="card-footer" {...rest}>{children}</div>;
};

Card.Header = Header
Card.Body = Body
Card.Footer = Footer

In this Card.tsx, we have a Card component that acts as the container for the card layout. Inside the Card, we have three compound components: CardHeader, CardBody, and CardFooter. Each of these components encapsulates a specific part of the card’s content, allowing for easy customization and composition. This structure enables developers to create diverse card layouts while maintaining a clean and organized codebase.

alt text

Let’s dive into the exciting part – putting our Card component to work and crafting a unique UI! With the versatility of our Card component and its customizable properties, the possibilities are endless.

// Example.tsx
import React from 'react';
import Card from './Card';

const Example = () => {
  return (
    <div className="grid-wrapper">
        {/* Image card */}
        <Card style={...whatever style need this card}>
            <Card.Header>
                <img src="card-image.png" alt="card-image" />
            </Card.Header>
            <Card.Body>
                <p>Lorem Ipsum is simply dummy text of the...</p>
            </Card.Body>
            <Card.Footer>
                <button>See More</button>
            </Card.Footer>
        </Card>
            
        {/* Text card */}
        <Card style={...whatever style need this card}>
            <Card.Header>
                <h2>Lorem Ipsum Is Simple </h2>
            </Card.Header>
            <Card.Body>
                <p>Lorem Ipsum is simply dummy text of the...</p>
            </Card.Body>
            <Card.Footer>
                <button>Continue Reading...</button>
            </Card.Footer>
        </Card>
    </div>
  );
};
alt text

The Card component exhibits common behaviors across its instances, such as hover effects, borders, and clickability. These behaviors can be encapsulated within the Card.tsx file and passed as arguments when needed. Additionally, it’s crucial to define types for the component, including BasicProps, which extends the intrinsic elements of a div with children as React nodes, and CardProps, which incorporates optional properties like isHover, isClickable, and hasBorder. Here’s an example of how to define these types in TypeScript:

type BasicProps = JSX.IntrinsicElements['div'] & {
  children: React.ReactNode
}

type CardProps = BasicProps & {
    isHover?: boolean;
    isClickable?: boolean;
    hasBorder?: boolean;
    ...
}

By structuring the Card component and its associated types in this way, we ensure a clear and organized approach to managing its behaviors and properties, while also allowing for flexibility and extensibility based on varying business needs and UI requirements.

Conclusion

The Compound Component Pattern empowers React developers to build flexible, composable, and reusable components. By encapsulating complex UI logic into cohesive units, this pattern enhances code organization, promotes reusability, and improves developer experience. As you continue your journey mastering React, remember to leverage the power of the Compound Component Pattern to create robust and maintainable UIs.

In conclusion, the Compound Component Pattern is a valuable addition to every React developer’s toolkit. Its ability to create highly reusable and customizable components enhances code maintainability and promotes a better developer experience. By understanding and implementing this pattern effectively, you can unlock the full potential of React for building robust and scalable applications.

Reference:

Published-date