Library for integrating WebContainers into React applications
This package helps you integrate WebContainers into your React application.
``bash`
pnpm add react-webcontainers
WebContainers _require_ SharedArrayBuffer, which, in turn, requires the website where they are running to be cross-origin isolated. Because of that, you'll need to set COOP/COEP headers:
`yaml`
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
To learn more about this topic and see how to do it, check Configuring Headers.
`tsx
import WebContainerProvider from "react-webcontainers";
export default function Providers({ children }: { children: React.ReactNode }) {
return
}
`
`tsx
import { useWebContainer } from "react-webcontainers";
export default function Page() {
const webContainer = useWebContainer();
return (
: "WebContainer instance still booting."}