### Render a single-spa Parcel with Static Config

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Example of using the `<Parcel />` component to render a single-spa parcel with a statically imported configuration. The `config` and `mountParcel` props are required.

```tsx
// src/components/WidgetShell.tsx
import Parcel from "single-spa-react/parcel";
import { mountRootParcel } from "single-spa";

// Static config object
import widgetConfig from "@org/widget/single-spa-config";

export function WidgetShell() {
  return (
    <Parcel
      // Required: parcel config or async loader
      config={widgetConfig}

      // Required: either mountParcel prop or singleSpaContext that provides it
      mountParcel={mountRootParcel}

      // Wrapper element customization
      wrapWith="section"
      wrapWithProps={{ className: "widget-wrapper", "aria-label": "Widget" }}

      // Lifecycle callbacks
      parcelDidMount={() => console.log("parcel mounted")}
      parcelDidUpdate={() => console.log("parcel updated")}
      handleError={(err) => console.error("parcel error:", err)}

      // Extra props forwarded to the parcel
      userId="u_123"
      theme="dark"
    />
  );
}
```

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

### Render a single-spa Parcel with Lazy-Loaded Config

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Example of using the `<Parcel />` component with a lazily loaded parcel configuration using an async import. The `config` and `mountParcel` props are required.

```tsx
// Lazy-loading parcel config via async function
export function LazyWidget() {
  return (
    <Parcel
      config={async () => {
        const mod = await import("@org/lazy-widget/single-spa-config");
        return mod.default;
      }}
      mountParcel={mountRootParcel}
      handleError={(err) => console.error(err)}
    />
  );
}
```

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

### singleSpaReact(opts) — Create single-spa lifecycle hooks for a React app

Source: https://context7.com/single-spa/single-spa-react/llms.txt

The `singleSpaReact()` function accepts an options object and returns a lifecycle object (`init`, `mount`, `update`, `unmount`) that single-spa uses to manage a React application. It requires either `createRoot` for client-side rendering or `hydrateRoot` for SSR hydration. The `renderReactNode` function, which receives single-spa props, must return a `ReactNode` or a `Promise<ReactNode>`. A custom DOM container can be specified using `domElementGetter`.

```APIDOC
## singleSpaReact(opts)

### Description
Creates single-spa lifecycle hooks for a React application.

### Method
`singleSpaReact(opts)`

### Parameters
#### Options (`opts`)
- **createElement** (function) - Required - React's `createElement` function.
- **useEffect** (function) - Required - React's `useEffect` hook.
- **createRoot** (function) - Required (for CSR) - React DOM's `createRoot` function.
- **hydrateRoot** (function) - Required (for SSR) - React DOM's `hydrateRoot` function.
- **renderReactNode** (function) - Required - A function that receives single-spa props and returns a `ReactNode` or a `Promise<ReactNode>`.
- **domElementGetter** (function) - Optional - A function that returns the DOM element where the React app should be mounted.
- **rootOptions** (object) - Optional - Extra options to be forwarded to `createRoot` or `hydrateRoot`.

### Request Example
```typescript
import { createElement, useEffect } from "react";
import { createRoot } from "react-dom/client";
import singleSpaReact from "single-spa-react";
import Root from "./Root";

export const { init, mount, unmount } = singleSpaReact({
  createElement,
  useEffect,
  createRoot,
  renderReactNode(props) {
    return <Root appProps={props} />;
  },
  // domElementGetter: () => document.getElementById("my-container"),
  // rootOptions: {
  //   onCaughtError(err) {
  //     console.error("React caught error:", err);
  //   },
  // },
});
```

### Response
Returns an object with single-spa lifecycle hooks: `{ init, mount, update, unmount }`.
```

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

### SingleSpaReactOpts Type

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Reference for all fields accepted by the `singleSpaReact()` function, including required and optional configuration parameters for setting up a single-spa React application.

```APIDOC
## `SingleSpaReactOpts` type — Full options reference

Documents every field accepted by `singleSpaReact()`.

```typescript
import type { SingleSpaReactOpts } from "single-spa-react";
import type { RootOptions } from "react-dom/client";

const opts: SingleSpaReactOpts = {
  // --- Required ---
  createElement,   // React.createElement
  useEffect,       // React.useEffect

  // Provide exactly one of these:
  createRoot,      // React 18+ client rendering
  // hydrateRoot,  // React 18+ SSR hydration

  // Returns the React node to render (may be async)
  renderReactNode: (props) => <App />,

  // --- Optional DOM targeting (from dom-element-getter-helpers) ---
  // domElementGetter: () => HTMLElement   — custom getter function
  // domElement: document.getElementById("app")  — static element

  // --- Optional React root configuration ---
  rootOptions: {
    onCaughtError: (err, info) => reportError(err),
    onUncaughtError: (err, info) => reportError(err), // also set internally
    onRecoverableError: (err) => console.warn(err),
    identifierPrefix: "override-prefix", // default: props.name
  } satisfies RootOptions,
};
```
```

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

### SingleSpaReactOpts Type Reference

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Reference for all fields accepted by the `singleSpaReact()` function. Ensure you provide at least one of `createRoot` or `hydrateRoot` for React 18+ rendering.

```typescript
import type { SingleSpaReactOpts } from "single-spa-react";
import type { RootOptions } from "react-dom/client";

const opts: SingleSpaReactOpts = {
  // --- Required ---
  createElement,   // React.createElement
  useEffect,       // React.useEffect

  // Provide exactly one of these:
  createRoot,
  // hydrateRoot,  // React 18+ SSR hydration

  // Returns the React node to render (may be async)
  renderReactNode: (props) => <App />,

  // --- Optional DOM targeting (from dom-element-getter-helpers) ---
  // domElementGetter: () => HTMLElement   — custom getter function
  // domElement: document.getElementById("app")  — static element

  // --- Optional React root configuration ---
  rootOptions: {
    onCaughtError: (err, info) => reportError(err),
    onUncaughtError: (err, info) => reportError(err), // also set internally
    onRecoverableError: (err) => console.warn(err),
    identifierPrefix: "override-prefix", // default: props.name
  } satisfies RootOptions,
};
```

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

### single-spa-react with hydrateRoot for SSR hydration

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Use this snippet for server-side rendering hydration. Replace 'createRoot' with 'hydrateRoot' and ensure 'domElementGetter' points to the element containing SSR markup. The container element is not removed on unmount as it's not auto-created.

```typescript
import {
  createElement,
  useEffect
} from "react";
import { hydrateRoot } from "react-dom/client";
import singleSpaReact from "single-spa-react";
import App from "./App";

export const { init, mount, unmount } = singleSpaReact({
  createElement,
  useEffect,
  hydrateRoot, // use hydrateRoot instead of createRoot

  // Must point to the element that already contains SSR HTML
  domElementGetter: () => document.getElementById("ssr-container"),

  renderReactNode(props) {
    return <App serverData={props.serverData} />;
  },
});

// On mount: hydrateRoot(domElement, reactTree) is called.
// React reuses the existing SSR DOM and attaches event listeners.
// On unmount: the React root is unmounted but the container element is NOT removed
//             because it was not auto-created by dom-element-getter-helpers.
```

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

### Using Parcel with singleSpaContext in React

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Demonstrates how to use the `<Parcel />` component deep within a React tree rendered by `singleSpaReact`. The `AppProps` (including `mountParcel`) are passed down via React context instead of explicit props.

```tsx
import { createContext, createElement, useEffect } from "react";
import { createRoot } from "react-dom/client";
import singleSpaReact from "single-spa-react";
import Parcel from "single-spa-react/parcel";
import type { AppProps } from "single-spa";

// Create and export a context typed to single-spa AppProps
export const SpaContext = createContext<AppProps>({
  name: "",
  mountParcel: null,
});

function App(props: AppProps) {
  return (
    // Provide the full AppProps (including mountParcel) via context
    <SpaContext.Provider value={props}>
      <main>
        <h1>Shell App</h1>
        {/* Parcel reads mountParcel from context automatically * /}
        <Parcel
          config={otherMicroFrontendConfig}
          singleSpaContext={SpaContext}
        />
      </main>
    </SpaContext.Provider>
  );
}

export const { init, mount, unmount } = singleSpaReact({
  createElement,
  useEffect,
  createRoot,
  renderReactNode: (props) => <App {...props} />,
});

```

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

### Create single-spa lifecycle hooks for a React app (CSR)

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Use this snippet to wrap a React component tree into single-spa lifecycle hooks for client-side rendering. Ensure 'createElement' and 'useEffect' are provided, along with 'createRoot'. The 'renderReactNode' function must return the React node to render.

```typescript
import {
  createElement,
  useEffect
} from "react";
import { createRoot } from "react-dom/client";
import singleSpaReact from "single-spa-react";
import Root from "./Root";

export const { init, mount, unmount } = singleSpaReact({
  // Required: React rendering primitives
  createElement,
  useEffect,

  // Required: either createRoot (CSR) or hydrateRoot (SSR)
  createRoot,

  // Required: return the React node to render; receives single-spa props
  renderReactNode(props) {
    return <Root appProps={props} />;
  },

  // Optional: override the default DOM container resolution
  // domElementGetter: () => document.getElementById("my-container"),

  // Optional: async renderReactNode for lazy-loaded roots
  // renderReactNode: async (props) => {
  //   const { default: Root } = await import("./Root");
  //   return <Root {...props} />;
  // },

  // Optional: extra options forwarded to createRoot / hydrateRoot
  rootOptions: {
    onCaughtError(err) {
      console.error("React caught error:", err);
    },
  },
});

// Expected: single-spa will call init() → mount() → (optionally update()) → unmount()
// On mount, a <div id="single-spa-application:my-app"> is created and the React tree rendered into it.
// On unmount, root.unmount() is called and the container div is removed from the DOM.
```

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

### singleSpaReact with hydrateRoot — SSR hydration

Source: https://context7.com/single-spa/single-spa-react/llms.txt

To enable server-side rendering (SSR) hydration, use `hydrateRoot` instead of `createRoot`. This attaches React event listeners to server-rendered HTML without discarding existing DOM nodes. The `domElementGetter` must point to the element that already contains the SSR markup. When using `hydrateRoot`, the container element is not automatically removed on unmount.

```APIDOC
## singleSpaReact with hydrateRoot — SSR hydration

### Description
Use `hydrateRoot` instead of `createRoot` for server-side rendering (SSR) hydration. This attaches React event listeners to server-rendered HTML without discarding existing DOM nodes. The `domElementGetter` must point to the element that already contains the SSR markup. The container element is not removed on unmount when using `hydrateRoot`.

### Method
`singleSpaReact(opts)` with `hydrateRoot` passed in options.

### Parameters
#### Options (`opts`)
- **createElement** (function) - Required - React's `createElement` function.
- **useEffect** (function) - Required - React's `useEffect` hook.
- **hydrateRoot** (function) - Required (for SSR) - React DOM's `hydrateRoot` function.
- **domElementGetter** (function) - Required - A function that returns the DOM element containing the SSR markup.
- **renderReactNode** (function) - Required - A function that receives single-spa props and returns a `ReactNode` or a `Promise<ReactNode>`.

### Request Example
```typescript
import { createElement, useEffect } from "react";
import { hydrateRoot } from "react-dom/client";
import singleSpaReact from "single-spa-react";
import App from "./App";

export const { init, mount, unmount } = singleSpaReact({
  createElement,
  useEffect,
  hydrateRoot, // use hydrateRoot instead of createRoot
  domElementGetter: () => document.getElementById("ssr-container"),
  renderReactNode(props) {
    return <App serverData={props.serverData} />;
  },
});
```

### Response
Returns an object with single-spa lifecycle hooks: `{ init, mount, update, unmount }`.
```

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

### SingleSpaReactParcelProps Type Reference

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Reference for all props accepted by the `<Parcel />` component. You must provide either the `mountParcel` prop or a `singleSpaContext` that resolves `mountParcel`.

```typescript
import type { SingleSpaReactParcelProps } from "single-spa-react/parcel";
import type { Context } from "react";
import type { AppProps, ParcelConfig } from "single-spa";

const parcelProps: SingleSpaReactParcelProps = {
  // Required: static config object or async loader returning a config
  config: myParcelConfig,
  // config: async () => (await import("./parcel")).default,

  // One of these must resolve mountParcel:
  mountParcel: mountRootParcel,          // explicit prop
  // singleSpaContext: MyAppContext,     // React context carrying AppProps

  // DOM wrapper
  wrapWith: "div",                        // default
  wrapWithProps: { id: "parcel-root" },

  // Callbacks
  parcelDidMount: () => {},
  parcelDidUpdate: () => {},
  handleError: (err: Error) => {},        // suppress throws, handle manually
};
```

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

### SingleSpaReactParcelProps Type

Source: https://context7.com/single-spa/single-spa-react/llms.txt

Reference for all props accepted by the `<Parcel />` component, detailing configuration, mounting, DOM wrapper customization, and lifecycle callbacks.

```APIDOC
## `SingleSpaReactParcelProps` type — Full `<Parcel />` props reference

```typescript
import type { SingleSpaReactParcelProps } from "single-spa-react/parcel";
import type { Context } from "react";
import type { AppProps, ParcelConfig } from "single-spa";

const parcelProps: SingleSpaReactParcelProps = {
  // Required: static config object or async loader returning a config
  config: myParcelConfig,
  // config: async () => (await import("./parcel")).default,

  // One of these must resolve mountParcel:
  mountParcel: mountRootParcel,          // explicit prop
  // singleSpaContext: MyAppContext,     // React context carrying AppProps

  // DOM wrapper
  wrapWith: "div",                        // default
  wrapWithProps: { id: "parcel-root" },

  // Callbacks
  parcelDidMount: () => {},
  parcelDidUpdate: () => {},
  handleError: (err: Error) => {},        // suppress throws, handle manually
};
```
```

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

### <Parcel /> Component

Source: https://context7.com/single-spa/single-spa-react/llms.txt

The `<Parcel />` component from `single-spa-react/parcel` allows you to render any single-spa parcel (regardless of framework) as a child within a React component tree. It mounts the parcel into a generated wrapper element.

```APIDOC
## `<Parcel />` component — Render a single-spa parcel inside a React tree

Imported from `single-spa-react/parcel`. Mounts a single-spa parcel (any framework) as a child of a React component tree. The parcel is mounted into a generated wrapper element (`<div>` by default). `mountParcel` can be supplied directly or read from a `singleSpaContext` context that carries the single-spa `AppProps`.

```tsx
// src/components/WidgetShell.tsx
import Parcel from "single-spa-react/parcel";
import { mountRootParcel } from "single-spa";

// Static config object
import widgetConfig from "@org/widget/single-spa-config";

export function WidgetShell() {
  return (
    <Parcel
      // Required: parcel config or async loader
      config={widgetConfig}

      // Required: either mountParcel prop or singleSpaContext that provides it
      mountParcel={mountRootParcel}

      // Wrapper element customization
      wrapWith="section"
      wrapWithProps={{ className: "widget-wrapper", "aria-label": "Widget" }}

      // Lifecycle callbacks
      parcelDidMount={() => console.log("parcel mounted")}
      parcelDidUpdate={() => console.log("parcel updated")}
      handleError={(err) => console.error("parcel error:", err)}

      // Extra props forwarded to the parcel
      userId="u_123"
      theme="dark"
    />
  );
}

// Lazy-loading parcel config via async function
export function LazyWidget() {
  return (
    <Parcel
      config={async () => {
        const mod = await import("@org/lazy-widget/single-spa-config");
        return mod.default;
      }}
      mountParcel={mountRootParcel}
      handleError={(err) => console.error(err)}
    />
  );
}
```
```

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