Working with Multiple JSX Slots - anastasiamexa/react-complete-guide-course-resources GitHub Wiki

In React, "JSX slots" is not a standard concept, but a common pattern used in some React component libraries or when creating reusable components. In this context, "slots" refer to areas within a component where you can inject custom JSX content. You can think of them as placeholders for content that can be customized when using the component.

Let's say you have a reusable component like a modal dialog. You might want to allow users of that component to insert their own content within the modal, such as text, buttons, or other components. To achieve this, you can create slots within your component by defining slots as a prop, and then users can pass their JSX content to these slots as children. Here's a simplified example:

function Modal({ header, footer, children }) {
  return (
    <div className="modal">
      <div className="modal-header">{header}</div>
      <div className="modal-content">{children}</div>
      <div className="modal-footer">{footer}</div>
    </div>
  );
}

// Using the Modal component with slots
<Modal
  header={<h2>Custom Header</h2>}
  footer={<button>OK</button>}
>
  <p>Custom content goes here.</p>
</Modal>

In this example, header, footer, and children are slots where users of the Modal component can provide their custom JSX content.