### Install Dependencies

Source: https://github.com/beautyfree/react-portalslots/blob/main/CONTRIBUTING.md

Installs project dependencies using pnpm. Ensure npm is installed before running this command.

```shell
pnpm i
```

--------------------------------

### Install react-portalslots using npm, pnpm, yarn, or bun

Source: https://github.com/beautyfree/react-portalslots/blob/main/README.md

This snippet shows the different package manager commands to install the react-portalslots library. It covers npm, pnpm, yarn, and bun, ensuring compatibility with various project setups.

```bash
npm install react-portalslots
# or
pnpm add react-portalslots
# or
yarn add react-portalslots
# or
bun add react-portalslots
```

--------------------------------

### Traditional React Layout Without Portal Slots (Prop Drilling Example)

Source: https://github.com/beautyfree/react-portalslots/blob/main/README.md

Illustrates the limitations of traditional React approaches by showcasing prop drilling. This example defines a Layout component that accepts header and footer content as props, highlighting how components deep within the tree must have their UI elements lifted up, leading to coupling and complexity.

```tsx
import React from 'react';

type LayoutProps = {
  header?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
};

function Layout({ header, footer, children }: LayoutProps) {
  return (
    <div className="page">
      <header className="page-header">{header}</header>
      <main className="page-content">{children}</main>
      <footer className="page-footer">{footer}</footer>
    </div>
  );
}

export function App() {
  // Content that wants to render into the header/footer must be lifted up here
  // from deep components, causing prop drilling and tight coupling.
  return (
    <Layout
      header={<button>Save</button>}
      footer={<small>© 2025</small>}
    >
      <SomeToolbar />
    </Layout>
  );
}

function SomeToolbar() {
  // Cannot push content into the header without threading callbacks/state
  // through multiple layers or using a global store (which is brittle).
  return null;
}
```

--------------------------------

### Conventional Commit Message Example

Source: https://github.com/beautyfree/react-portalslots/blob/main/CONTRIBUTING.md

An example of a commit message following the Conventional Commits specification, specifying a feature addition to the components module.

```text
feat(components): add new prop to the avatar component
```

--------------------------------

### PortalSlotsProvider API Usage

Source: https://github.com/beautyfree/react-portalslots/blob/main/README.md

Shows the basic implementation of the PortalSlotsProvider, which is a required context provider that must wrap the application or the part of the application where portal slots will be used. It's a simple, declarative setup.

```tsx
<PortalSlotsProvider>
  <App />
</PortalSlotsProvider>
```

--------------------------------

### Basic Usage of react-portalslots with Provider, Slots, and Portals

Source: https://github.com/beautyfree/react-portalslots/blob/main/README.md

Demonstrates the fundamental usage of react-portalslots. It shows how to set up the PortalSlotsProvider, define named slots (e.g., 'header', 'footer') using PortalSlot, and render content into these slots from different parts of the application. This example illustrates the core pattern of decoupling UI rendering.

```tsx
import { PortalSlotsProvider, PortalSlot } from 'react-portalslots';

const HeaderPortal = PortalSlot('header');
const FooterPortal = PortalSlot('footer');

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="page">
      <header className="page-header">
        <HeaderPortal.Slot />
      </header>

      <main className="page-content">{children}</main>

      <footer className="page-footer">
        <FooterPortal.Slot />
      </footer>
    </div>
  );
}

export function App() {
  return (
    <PortalSlotsProvider>
      <Layout>
        {/* These can live anywhere in the tree */}
        <HeaderPortal>
          <button>Save</button>
        </HeaderPortal>
        <FooterPortal>
          <small>© 2025</small>
        </FooterPortal>

        {/* App content */}
        <div>Dashboard</div>
      </Layout>
    </PortalSlotsProvider>
  );
}
```

--------------------------------

### Setup PortalSlotsProvider in React App

Source: https://context7.com/beautyfree/react-portalslots/llms.txt

The PortalSlotsProvider acts as a context provider for the portal system. It must wrap your application or the relevant part of the component tree where portals will be utilized. This ensures that a single registry instance is available to track all portal slots and their associated DOM containers.

```tsx
import { PortalSlotsProvider } from 'react-portalslots';

function App() {
  return (
    <PortalSlotsProvider>
      <Layout>
        <Dashboard />
      </Layout>
    </PortalSlotsProvider>
  );
}

export default App;

```

--------------------------------

### PortalSlot Factory Function API Usage

Source: https://github.com/beautyfree/react-portalslots/blob/main/README.md

Demonstrates how to use the `PortalSlot` factory function to create named slots and their corresponding components. This includes creating a slot container (`Slot`) and a portal component that renders content into that slot. It highlights the creation of a 'header' slot as an example.

```tsx
const HeaderPortal = PortalSlot('header');

// Use the slot in your layout
<HeaderPortal.Slot />

// Render content into the slot from anywhere
<HeaderPortal>
  <button>Save</button>
</HeaderPortal>
```

--------------------------------

### Error Boundary Integration with Portals in React

Source: https://context7.com/beautyfree/react-portalslots/llms.txt

This example demonstrates how to integrate portals with error boundaries in a React application using TypeScript. It shows how to handle rendering failures gracefully within portal components. The code defines a reusable ErrorBoundary component and a BuggyComponent that can simulate errors. It requires 'react-portalslots' and 'react'.

```tsx
import { PortalSlotsProvider, PortalSlot } from 'react-portalslots';
import { Component, type ReactNode, type ErrorInfo } from 'react';

const NotificationPortal = PortalSlot('notifications');

class ErrorBoundary extends Component<
  { children: ReactNode; fallback: ReactNode },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: { children: ReactNode; fallback: ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Error boundary caught:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

function Layout({ children }: { children: ReactNode }) {
  return (
    <div className="app">
      <div className="notifications">
        <NotificationPortal.Slot />
      </div>
      <main>{children}</main>
    </div>
  );
}

function BuggyComponent({ shouldThrow }: { shouldThrow: boolean }) {
  if (shouldThrow) {
    throw new Error('Component crashed!');
  }

  return (
    <NotificationPortal>
      <div className="success">Component working fine</div>
    </NotificationPortal>
  );
}

function App() {
  const [shouldThrow, setShouldThrow] = React.useState(false);

  return (
    <PortalSlotsProvider>
      <Layout>
        <div>
          <button onClick={() => setShouldThrow(!shouldThrow)}>
            Toggle Error
          </button>

          <ErrorBoundary
            fallback={
              <NotificationPortal>
                <div className="error">
                  An error occurred. Portal still works!
                </div>
              </NotificationPortal>
            }
          >
            <BuggyComponent shouldThrow={shouldThrow} />
          </ErrorBoundary>
        </div>
      </Layout>
    </PortalSlotsProvider>
  );
}

export default App;

```

--------------------------------

### Project Build and Check Scripts

Source: https://github.com/beautyfree/react-portalslots/blob/main/CONTRIBUTING.md

Scripts for building the project for production, performing type checks, and running tests with Jest.

```shell
pnpm build

```

```shell
pnpm check

```

```shell
pnpm test

```

--------------------------------

### PortalSlotsProvider

Source: https://github.com/beautyfree/react-portalslots/blob/main/README.md

The context provider that must wrap your entire application to enable the portal slots functionality.

```APIDOC
## PortalSlotsProvider

### Description

Context provider that must wrap your application.

### Usage

```tsx
import { PortalSlotsProvider } from 'react-portalslots';

<PortalSlotsProvider>
  <App />
</PortalSlotsProvider>
```
```

--------------------------------

### Multi-Page Layout with React Portal Slots

Source: https://context7.com/beautyfree/react-portalslots/llms.txt

Demonstrates how different pages can render content into shared layout slots (header, footer) without prop drilling. It uses react-router-dom for routing and defines layout slots using PortalSlot. The content for these slots is provided within page components.

```tsx
import { PortalSlotsProvider, PortalSlot } from 'react-portalslots';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

const HeaderPortal = PortalSlot('header');
const FooterPortal = PortalSlot('footer');

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="app">
      <header className="header">
        <HeaderPortal.Slot />
      </header>
      <main className="content">{children}</main>
      <footer className="footer">
        <FooterPortal.Slot />
      </footer>
    </div>
  );
}

function HomePage() {
  return (
    <div>
      <HeaderPortal>
        <div className="header-content">
          <h1>Home</h1>
          <button>Sign In</button>
        </div>
      </HeaderPortal>

      <h2>Welcome to Home Page</h2>

      <FooterPortal>
        <p>© 2025 Home Page</p>
      </FooterPortal>
    </div>
  );
}

function SettingsPage() {
  const [saved, setSaved] = React.useState(false);

  return (
    <div>
      <HeaderPortal>
        <div className="header-content">
          <h1>Settings</h1>
          <button onClick={() => setSaved(true)}>
            {saved ? 'Saved!' : 'Save'}
          </button>
        </div>
      </HeaderPortal>

      <h2>Settings Page</h2>
      <input type="text" placeholder="Username" />

      <FooterPortal>
        <p>Last saved: {saved ? 'Just now' : 'Never'}</p>
      </FooterPortal>
    </div>
  );
}

function App() {
  return (
    <PortalSlotsProvider>
      <BrowserRouter>
        <Layout>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/settings">Settings</Link>
          </nav>

          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/settings" element={<SettingsPage />} />
          </Routes>
        </Layout>
      </BrowserRouter>
    </PortalSlotsProvider>
  );
}

export default App;
```

--------------------------------

### PortalSlot Factory

Source: https://github.com/beautyfree/react-portalslots/blob/main/README.md

A factory function that creates a pair of components for a named slot: a Slot component and a Portal component.

```APIDOC
## PortalSlot(name?: string)

### Description

Factory function that creates a pair of components for a named slot.

- **PortalSlot.Slot**: The slot container where content will be rendered.
- **PortalSlot**: Portal component that renders content into the slot.

### Usage

```tsx
import { PortalSlot } from 'react-portalslots';

const HeaderPortal = PortalSlot('header');

// Use the slot in your layout
<HeaderPortal.Slot />

// Render content into the slot from anywhere
<HeaderPortal>
  <button>Save</button>
</HeaderPortal>
```
```

--------------------------------

### Conditional Rendering with React Portal Slots

Source: https://context7.com/beautyfree/react-portalslots/llms.txt

Illustrates conditional portal rendering and supports multiple portal instances targeting the same slot. It demonstrates how portal content can be dynamically shown or hidden based on component state. The key takeaway is that only the slot container needs to be present in the DOM for portals to render.

```tsx
import { PortalSlotsProvider, PortalSlot } from 'react-portalslots';

const ToolbarPortal = PortalSlot('toolbar');

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <div className="toolbar">
        <ToolbarPortal.Slot />
      </div>
      <div className="content">{children}</div>
    </div>
  );
}

function Editor() {
  const [isEditing, setIsEditing] = React.useState(false);
  const [hasChanges, setHasChanges] = React.useState(false);

  return (
    <div>
      {/* Conditionally render portal content */}
      {isEditing && (
        <ToolbarPortal>
          <button onClick={() => setIsEditing(false)}>Cancel</button>
          <button onClick={() => {
            setHasChanges(false);
            setIsEditing(false);
          }}>
            Save
          </button>
        </ToolbarPortal>
      )}

      {!isEditing && (
        <ToolbarPortal>
          <button onClick={() => setIsEditing(true)}>Edit</button>
        </ToolbarPortal>
      )}

      {/* Multiple portal instances can exist */}
      {hasChanges && (
        <ToolbarPortal>
          <span style={{ color: 'orange', marginLeft: '1rem' }}>
            Unsaved changes
          </span>
        </ToolbarPortal>
      )}

      <textarea
        placeholder="Start typing..."
        onChange={() => setHasChanges(true)}
        disabled={!isEditing}
      />
    </div>
  );
}

function App() {
  return (
    <PortalSlotsProvider>
      <Layout>
        <Editor />
      </Layout>
    </PortalSlotsProvider>
  );
}

export default App;
```

--------------------------------

### Type-Safe Portal Pattern with TypeScript in React

Source: https://context7.com/beautyfree/react-portalslots/llms.txt

This snippet demonstrates how to implement a type-safe portal pattern using TypeScript with the react-portalslots library. It defines typed props for portal content and uses strongly-typed slot factory functions. This ensures type safety throughout the component library, preventing runtime errors and improving developer experience. It requires 'react-portalslots' and 'react'.

```tsx
import { PortalSlotsProvider, PortalSlot } from 'react-portalslots';
import type { ReactNode } from 'react';

// Define typed portal factories
interface HeaderContent {
  title: string;
  actions?: ReactNode;
}

interface FooterContent {
  copyright: string;
  links?: Array<{ label: string; href: string }>;
}

// Create portals (no special types needed, TypeScript infers)
const HeaderPortal = PortalSlot('header');
const FooterPortal = PortalSlot('footer');

// Type-safe wrapper components
function HeaderContent({ title, actions }: HeaderContent) {
  return (
    <HeaderPortal>
      <div className="header-content">
        <h1>{title}</h1>
        {actions && <div className="actions">{actions}</div>}
      </div>
    </HeaderPortal>
  );
}

function FooterContent({ copyright, links }: FooterContent) {
  return (
    <FooterPortal>
      <div className="footer-content">
        <p>{copyright}</p>
        {links && (
          <nav>
            {links.map(link => (
              <a key={link.href} href={link.href}>
                {link.label}
              </a>
            ))}
          </nav>
        )}
      </div>
    </FooterPortal>
  );
}

function Layout({ children }: { children: ReactNode }) {
  return (
    <div className="layout">
      <header>
        <HeaderPortal.Slot />
      </header>
      <main>{children}</main>
      <footer>
        <FooterPortal.Slot />
      </footer>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <HeaderContent
        title="Dashboard"
        actions={
          <>
            <button>Save</button>
            <button>Export</button>
          </>
        }
      />

      <div className="dashboard-grid">
        <div>Chart 1</div>
        <div>Chart 2</div>
      </div>

      <FooterContent
        copyright="© 2025 Company Inc."
        links={[
          { label: 'Privacy', href: '/privacy' },
          { label: 'Terms', href: '/terms' }
        ]}
      />
    </div>
  );
}

function App() {
  return (
    <PortalSlotsProvider>
      <Layout>
        <Dashboard />
      </Layout>
    </PortalSlotsProvider>
  );
}

export default App;

```

--------------------------------

### Create and Use Named Portals with PortalSlot

Source: https://context7.com/beautyfree/react-portalslots/llms.txt

PortalSlot is a factory function used to create named portals for specific slots like 'header', 'footer', or 'sidebar'. It returns a Portal component with an attached 'Slot' property. The 'Slot' component renders the container for the portal, while the Portal component itself renders content into that designated container. Named slots use unique symbol identifiers to prevent naming conflicts.

```tsx
import { PortalSlotsProvider, PortalSlot } from 'react-portalslots';
import React from 'react';

// Create named portals
const HeaderPortal = PortalSlot('header');
const FooterPortal = PortalSlot('footer');
const SidebarPortal = PortalSlot('sidebar');

// Layout defines where slots appear
function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="page">
      <header className="page-header">
        <HeaderPortal.Slot className="custom-header-class" />
      </header>

      <div className="page-body">
        <aside className="page-sidebar">
          <SidebarPortal.Slot />
        </aside>

        <main className="page-content">
          {children}
        </main>
      </div>

      <footer className="page-footer">
        <FooterPortal.Slot>
          <small>Default footer content</small>
        </FooterPortal.Slot>
      </footer>
    </div>
  );
}

// Deep components can render into slots
function Dashboard() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      {/* Render into header from deep component */}
      <HeaderPortal>
        <button onClick={() => setCount(c => c + 1)}>
          Save Changes ({count})
        </button>
      </HeaderPortal>

      {/* Render into sidebar */}
      <SidebarPortal>
        <nav>
          <a href="/home">Home</a>
          <a href="/settings">Settings</a>
        </nav>
      </SidebarPortal>

      {/* Main content */}
      <div className="dashboard-content">
        <h1>Dashboard</h1>
        <p>Click count: {count}</p>
      </div>

      {/* Render into footer */}
      <FooterPortal>
        <small>© 2025 Dashboard Inc.</small>
      </FooterPortal>
    </div>
  );
}

// Root app
function App() {
  return (
    <PortalSlotsProvider>
      <Layout>
        <Dashboard />
      </Layout>
    </PortalSlotsProvider>
  );
}

export default App;

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.