🚀 Transform Your UI: Creating Layouts Using Compound Components in React – A Step-by-Step Guide
Tags: react, webdev, tutorial, frontend
Published: 2023-08-14 14:16:25

## Introduction
Building robust and maintainable layouts can be a challenge in React applications. Compound components offer a way to achieve this by allowing for reusable and modular code. In this tutorial, you'll learn how to create a layout using compound components step by step by leveraging the concept of **slots**.

## The Goal
```tsx
const App = () => {
  return (
    <MainLayout.Root>
      <MainLayout.Sidebar className="shadow-xl z-10 relative">
        <p>Sidebar</p>
      </MainLayout.Sidebar>
      <MainLayout.Header>
        <h1 className="text-xl font-bold">My App</h1>
      </MainLayout.Header>
      <MainLayout.Body>
        <p>Body</p>
      </MainLayout.Body>
      <MainLayout.Footer>
        <p>Footer</p>
      </MainLayout.Footer>
    </MainLayout.Root>
  );
};
```

## Why Slots? 
Before diving into the code, it's crucial to understand what slots are and why we're using them. A slot is just a placeholder where other components can be inserted. 

For our layouts we'll be defining two types of slots: a **fragment slot** and a **container slot**. The fragment slot prevents the caller from setting any properties, such as className, whereas the container slot allows it. This flexibility lets us control how our layout behaves and is customized.

## Create a Fragment Slot
The fragment slot is a simple wrapper that renders its children without adding any additional HTML tags or properties. This kind of slot is beneficial when you want to maintain a clean and controlled structure.

```tsx
export const Slot = () => (props: { children: React.ReactNode }) => {
  return <>{props.children}</>;
};
```

## Create a Container Slot
The container slot is more versatile and can behave like any HTML tag, such as a div, section, header, etc. This allows for more customization and control. We define a `className` argument so that we can provide some default classes. 

```tsx
export const ContainerSlot =
  (ar?: {
    as?: "div" | "section" | "header" | "footer" | "main";
    className?: string;
  }) =>
  (props: { children: React.ReactNode } & HTMLProps<HTMLDivElement>) => {
    const El = ar?.as ?? "div";
    return (
      <El {...props} className={cn(ar?.className, props.className)}>
        {props.children}
      </El>
    );
  };
```

These two slots are the only ones we need for our example but we've also found it useful to create other slots like a "Text" slot that required `props.children` to be a string.

## Getting our slot content
In order to get our slot content when we're defining our layout we need to loop through our `props.children` using something like `React.Children.map` but for convenience we'll just use a library [react-nanny](https://github.com/TheSpicyMeatball/react-nanny). You can leave this out if you don't want another dependency. 

```tsx
import { getChildrenByType } from "react-nanny";

export const getSlotByType = (
  children: React.ReactNode | undefined | null,
  type: React.ElementType | React.ElementType[]
) => {
  if (!children) return null;
  const content = getChildrenByType(children, type);
  return content;
};
```

## Define our layout
Let's define our layout sections and layout. We'll create slots for a sidebar, header, footer, and main content area.
```tsx
const Sidebar = ContainerSlot({
  className: "bg-gray-100 w-64 flex flex-col overflow-hidden",
});

const Header = ContainerSlot({
  className: "bg-gray-100 flex items-center justify-between px-4 py-2",
  as: "header",
});

const Footer = ContainerSlot({
  className: "bg-gray-100 flex items-center justify-between px-4 py-2",
  as: "footer",
});

const Body = ContainerSlot({
  className: "flex-1 overflow-auto",
  as: "main",
});

const Root = (props: { children: React.ReactNode }) => {
  // Here we're using our util to get the appropriate slot content
  const sidebar = getSlotByType(props.children, Sidebar);
  const header = getSlotByType(props.children, Header);
  const footer = getSlotByType(props.children, Footer);
  const body = getSlotByType(props.children, Body);

  return (
    <div className="flex flex-col h-screen w-screen">
      {header}
      <div className="flex flex-1">
        {sidebar}
        {body}
      </div>
      {footer}
    </div>
  );
};

export const MainLayout = {
  Root,
  Sidebar,
  Header,
  Footer,
  Body,
};
```

## Use the layout
We can now use the layout in our application
```tsx
const App = () => {
  return (
    <MainLayout.Root>
      <MainLayout.Sidebar>
        <p>Sidebar</p>
      </MainLayout.Sidebar>
      <MainLayout.Header>
        <h1 className="text-xl font-bold">My App</h1>
      </MainLayout.Header>
      <MainLayout.Body>
        <p>Body</p>
      </MainLayout.Body>
      <MainLayout.Footer>
        <p>Footer</p>
      </MainLayout.Footer>
    </MainLayout.Root>
  );
};
```

## Conclusion
That's it! We've created a reusable layout using compound components. Feel free to explore these concepts further and adapt them to your specific needs.