Compound components are a pattern commonly used in React applications to create reusable, flexible components. Compound components consist of a parent component that manages the state and logic of the component, and child components that are responsible for rendering the UI.

The key feature of compound components is that they allow developers to create a single component that can be used in different contexts while maintaining consistency and flexibility. In this blog post, we will explore the concept of compound components and provide some code examples to help you understand how to implement this pattern in your React applications.

Creating a Simple Compound Component

Let's start by creating a simple compound component that consists of a parent component and two child components. Our goal is to create a component that displays a list of items and allows the user to select one of them. Here's how we can implement this component using compound components:

In this example, we have two child components: ListItem and List. The ListItem component is responsible for rendering a single list item and accepts three props: children, onClick, and selected. The children prop contains the content of the list item, onClick is a function that is called when the user clicks on the list item, and selected is a boolean that indicates whether the item is currently selected.

The List component is the parent component and is responsible for managing the state and logic of the component. It has a state variable selectedIndex that keeps track of the currently selected item and a handleSelect function that is called when the user clicks on an item. The List component also uses the React.Children.map function to iterate over the children and pass down the onClick and selected props to each ListItem component.

Finally, we have the CompoundComponent component, which is the top-level component that we can use in our application. It simply renders the List component with three ListItem components as children.

Using Compound Components

Now that we have created our compound component, let's see how we can use it in our application. Here's an example of how we can render the CompoundComponent component:

In this example, we simply render the CompoundComponent component inside a div element. When we run our application, we should see a list of items with the first item selected by default.

Output:

Customizing the Compound Component

One of the benefits of using compound components is that we can customize them by modifying the child components. For example, let's say we want to change the color of the selected item to
green instead of red. We can do this by modifying the ListItem component as follows:

In this example, we have added a new prop called selectedColor to the ListItem component. We pass this prop down to each ListItem component when we render the CompoundComponent component, and use it to set the color of the selected item in the style prop.

Conclusion

Compound components are a powerful pattern that can help us create reusable, flexible components in our React applications. By combining a parent component and multiple child components, we can create components that can be customized and reused in different contexts. In this blog post, we explored the concept of compound components and provided some code examples to help you understand how to implement this pattern in your own applications. With compound components, you can create complex UI elements that are easy to use and maintain, making your React applications more efficient and scalable.

Connect with me on my:

LinkedIn
GitHub
Twitter