63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { SandpackPreviewRef, useSandpack, SandpackPreview, SandpackFileExplorer, Sandpack } from '@codesandbox/sandpack-react';
|
|
import { useEffect, useRef } from 'react';
|
|
import { SandpackProvider, SandpackLayout, SandpackCodeEditor } from '@codesandbox/sandpack-react';
|
|
|
|
export const App = () => {
|
|
return (
|
|
<div>
|
|
<h1>Welcome to the App</h1>
|
|
<p>This is a simple React application.</p>
|
|
<div>
|
|
{/* <SandpackProvider template='react'>
|
|
<SandpackLayout>
|
|
<SandpackFileExplorer />
|
|
<SandpackCodeEditor />
|
|
</SandpackLayout>
|
|
</SandpackProvider> */}
|
|
{/* <SandpackPreviewClient /> */}
|
|
|
|
<Sandpack
|
|
template='react'
|
|
// template='node'
|
|
// options={{
|
|
// layout: 'console', // preview | tests | console
|
|
// }}
|
|
options={{
|
|
showNavigator: true,
|
|
// bundlerURL: 'https://sandpack-bundler.vercel.app',
|
|
bundlerURL: 'http://localhost:3000',
|
|
// bundlerURL: 'https://2-19-8-sandpack.codesandbox.io',
|
|
}}
|
|
files={{
|
|
'/App.js': `export default function App() { return <h1>Hello Sandpack!</h1>; }`,
|
|
'./index.html': {
|
|
code: `<html>12345</html>`,
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const SandpackPreviewClient: React.FC = () => {
|
|
const { sandpack } = useSandpack();
|
|
const previewRef = useRef<SandpackPreviewRef>(null);
|
|
|
|
useEffect(() => {
|
|
const client = previewRef.current?.getClient();
|
|
const clientId = previewRef.current?.clientId;
|
|
|
|
if (client && clientId) {
|
|
console.log(client);
|
|
console.log(sandpack.clients[clientId]);
|
|
}
|
|
/**
|
|
* NOTE: In order to make sure that the client will be available
|
|
* use the whole `sandpack` object as a dependency.
|
|
*/
|
|
}, [sandpack]);
|
|
|
|
return <SandpackPreview ref={previewRef} />;
|
|
};
|