React - Content projection

import { ReactNode, FC } from 'react';

interface CardProps {
  header: ReactNode;
  children: ReactNode;
}

const CardComponent: FC<CardProps> = ({ header, children }) => {
  return (
    <>
      <div className="header">{header}</div>
      <div className="content">{children}</div>
    </>
  )
};


const AppComponent: FC = () => {
  return (
    <CardComponent
      header={<h1>It's a title</h1>}
    >
      <img src="card-image.png"/>
      <div>Content of a Card</div>
    </CardComponent>
  )
}

Use ReactNode type to mark properties that will receive HTML content or other React components

Define layout and styles for the Card. Allow to pass header and content from parent components. It will make it flexible and reusable.

In parent component pass the content you want to render in header and in the body of the Card Component. You can also extract the content to dedicated smaller component.

TSX

React Content Projection

Details

Discussion

Content projection is a design pattern that allows content to be passed from a parent component to a child component. This pattern removes the strict dependency between a component and the content it generates.

As a result, components become reusable, customizable, and flexible. You can use them in different contexts with varying content.

This approach leads to a better separation of concerns, as each component is responsible for its own functionality. For example, a Card component is no longer dependent on knowing what kind of content it is rendering. This clear separation results in much simpler code without conditional logic.

Because we can reuse more parts of our solution, it becomes much easier to maintain.

Content projection is an excellent choice whenever you need to:

Share a common layout with different content.
Allow your component to display varied content based on the context it is placed in.
Create low-level components that can be reused by other developers in different scenarios.

You can see content projection used in component libraries like PrimeNG.