{"library":"single-spa-react","title":"single-spa-react","description":"single-spa-react is a utility library designed to simplify the integration of React applications and components into a single-spa microfrontend architecture. It provides helper functions that adapt React's rendering and lifecycle methods (bootstrap, mount, unmount) to single-spa's expectations. The current stable version is 6.0.2, with ongoing active development including patch releases and a v7.0.0-beta.0 in progress. Key differentiators include robust support for React 18's `createRoot` API, explicit compatibility options for older React versions, built-in error boundary mechanisms, and a dedicated `<Parcel>` component for managing framework-agnostic micro-frontends within a React application. It focuses on ensuring React applications adhere to single-spa's lifecycle contracts and work seamlessly within a polyglot microfrontend environment.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install single-spa-react"],"cli":null},"imports":["import singleSpaReact from 'single-spa-react';","import { SingleSpaContext } from 'single-spa-react';","import Parcel from 'single-spa-react/parcel';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOMClient from 'react-dom/client'; // For React 18+\nimport singleSpaReact from 'single-spa-react';\n\n// A simple React component for the microfrontend\nconst MyReactApp = ({ name, mountParcel }) => {\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    console.log(`${name} mounted!`);\n    return () => console.log(`${name} unmounted!`);\n  }, [name]);\n\n  return (\n    <div style={{\n      padding: '20px',\n      border: '1px solid #61dafb',\n      borderRadius: '8px',\n      margin: '10px',\n      backgroundColor: '#282c34',\n      color: 'white'\n    }}>\n      <h2>Hello from {name}!</h2>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(c => c + 1)} style={{ padding: '8px 16px', borderRadius: '4px', cursor: 'pointer' }}>Increment</button>\n      <p>This is a single-spa React application.</p>\n      {/* Optionally mount a parcel here */}\n      {/* <Parcel config={mountParcel} wrapWith='div' /> */}\n    </div>\n  );\n};\n\n// A basic error boundary component is highly recommended for robustness.\nclass ErrorBoundary extends React.Component {\n  state = { hasError: false };\n  static getDerivedStateFromError(error) { return { hasError: true }; }\n  componentDidCatch(error, errorInfo) {\n    console.error(\"React component error:\", error, errorInfo);\n  }\n  render() {\n    if (this.state.hasError) {\n      return <h1 style={{ color: 'red' }}>Something went wrong in {this.props.name}.</h1>;\n    }\n    return this.props.children;\n  }\n}\n\n// Configure single-spa-react with your React application.\nconst lifecycles = singleSpaReact({\n  React, // Pass the React library\n  ReactDOMClient, // Use ReactDOMClient for React 18+ for createRoot. For React 17-, use ReactDOM and specify renderType: 'render'.\n  rootComponent: MyReactApp, // Your top-level React component\n  // A function that returns the DOM element where the React app will be mounted.\n  domElementGetter: () => {\n    let el = document.getElementById('react-app-container');\n    if (!el) {\n      el = document.createElement('div');\n      el.id = 'react-app-container';\n      document.body.appendChild(el); // Append to body or a specific parent defined in your root config\n    }\n    return el;\n  },\n  // Recommended: Provide an error boundary for better fault tolerance.\n  errorBoundary: ErrorBoundary,\n  // Optional: Pass custom props to your root component.\n  getAppProps: ({ name, ...props }) => ({ name: name || 'Default React App', ...props }),\n  // Suppress warning if using an errorBoundary function/class\n  suppressComponentDidCatchWarning: true\n});\n\n// Export single-spa lifecycles for your microfrontend.\nexport const { bootstrap, mount, unmount } = lifecycles;\n","lang":"typescript","description":"This quickstart demonstrates how to wrap a React application for single-spa using `single-spa-react`. It showcases React 18's `ReactDOMClient`, integrates an error boundary, and defines the `domElementGetter` for mounting.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}