repository·main·Indexed 42 days ago
https://github.com/single-spa/single-spa-reactA wrapper providing single-spa lifecycle hooks for React applications, allowing them to be used as applications or parcels within a microfrontend architecture. Version 7.0.0-beta.0 includes the singleSpaReact function for managing bootstrap, mount, unmount, and update lifecycles, and the SingleSpaReactParcel component for rendering single-spa parcels within React apps.
The singleSpaReact function is the primary entrypoint for creating single-spa lifecycle functions (bootstrap, mount, unmount, update) for a React application. It abstracts the complexity of managing React roots (using createRoot or hydrateRoot) within the single-spa ecosystem.
To use it, you must provide a configuration object of type SingleSpaReactOpts that includes React's core functions and a rendering function.
import singleSpaReact from 'single-spa-react';
import React from 'react';
import { createRoot } from 'react-dom/client';
const lifecycles = singleSpaReact({
createElement: React.createElement,
useEffect: React.useEffect,
renderReactNode: (props) => <MyAppComponent {...props} />,
createRoot: createRoot,
// Optional: rootOptions, domElementGetter, etc.
});
export const { bootstrap, mount, unmount } = lifecycles;The SingleSpaReactParcel component is used to render a single-spa parcel within a React application. It manages the lifecycle of the parcel, including loading its configuration, mounting it into a DOM element, updating it when props change, and unmounting it when the component is destroyed.
To use it, you must provide a config prop (either a ParcelConfig object or a function that returns a Promise<ParcelConfig>) and a way to mount the parcel, either via the mountParcel prop or by providing a singleSpaContext.
import SingleSpaReactParcel from 'single-spa-react/Parcel';
// Example using a config object and mountParcel function
<SingleSpaReactParcel
config={{
selector: '#my-parcel',
module: () => import('my-parcel-module'),
}}
mountParcel={mountRootParcel}
wrapWith="div"
/>The SingleSpaReactParcelProps interface defines the configuration options for the <SingleSpaReactParcel /> component:
| Prop | Type | Description |
|---|---|---|
config | ParcelConfig | (() => Promise<ParcelConfig>) | Required. The configuration for the parcel. Can be a direct object or an async loading function. |
mountParcel | typeof mountRootParcel | The function used to mount the parcel. If not provided, it attempts to use mountParcel from the singleSpaContext. |
singleSpaContext | Context<AppProps> | A React context containing single-spa application properties, including mountParcel. |
parcelDidMount | () => void | Callback function executed when the parcel's mountPromise resolves. |
parcelDidUpdate | () => void | Callback function executed after the parcel's update method resolves. |
handleError | (err: Error) => void | Callback function to handle errors during config loading, mounting, or updating. |
wrapWith | string | The HTML element tag used to wrap the parcel container. Defaults to "div". |
wrapWithProps | DetailedHTMLProps<any, any> | Additional props to apply to the wrapWith element. |
...parcelProps | any | Any additional props passed directly to the parcel's mount and update methods. |
The SingleSpaReactOpts object defines how the React application is rendered and managed.
createElement: The React createElement function.useEffect: The React useEffect hook.renderReactNode: A function that returns a ReactNode or a Promise<ReactNode>. This function is responsible for generating the element tree to be rendered.createRoot OR hydrateRoot: You must provide either createRoot (for client-side rendering) or hydrateRoot (for server-side rendering/hydration) from react-dom/client.rootOptions: Configuration passed to React's createRoot or hydrateRoot (e.g., onUncaughtError).domElementGetter: Options for determining which DOM element the React application should attach to (inherited from DomElementGetterOpts).