add example

codesandbox · Jul 11, 2024 · eb95c76 · eb95c76
1 parent 3127d18
commit eb95c76
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/sandpack-react/src/presets/CustomSandpack.stories.tsx b/sandpack-react/src/presets/CustomSandpack.stories.tsx
@@ -45,16 +45,17 @@ export const ExperimentalServiceWorker: React.FC = () => {
 </svg>
   `,
         "/App.js": `export default function App() {
-return <>
-  <h1>Hello world</h1>
-  <img width="200" src="/public/logo.svg" />
-</>
+  return (
+    <>
+      <h1>Hello React</h1>
+      <img width="100" src="/public/logo.svg" />
+    </>
+  );
 }
-  `,
+        `,
       }}
       options={{
         experimental_enableServiceWorker: true,
-        bundlerURL: "https://f6lh85-3000.csb.app",
       }}
       template="react"
     />

diff --git a/website/docs/src/pages/advanced-usage/serving-static-files.mdx b/website/docs/src/pages/advanced-usage/serving-static-files.mdx
@@ -1,3 +1,5 @@
+import { CodeBlock } from "../../components/CodeBlock";
+
 # Serving static files
 
 Sandpack is introducing beta support for serving static files inside each Sandpack instance. Files such as SVGs, fonts, images, etc., can now be used by enabling the flag specified below.
@@ -16,12 +18,50 @@ By enabling this feature, Sandpack will register a new Service Worker in the ifr
 >
   {...}
 </SandpackProvider>
+```
 
-// or
-
+<br />
+```jsx
 <Sandpack
   options={{
     experimental_enableServiceWorker: true,
   }}
 />
 ```
+
+## Example
+
+<CodeBlock stack>
+{`import { Sandpack } from "@codesandbox/sandpack-react";
+
+export default () => (
+  <Sandpack
+    files={{
+      "/public/logo.svg": \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+<title>React Logo</title>
+<circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+<g stroke="#61dafb" stroke-width="1" fill="none">
+  <ellipse rx="11" ry="4.2"/>
+  <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+  <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+</g>
+</svg>
+\`,
+      "/App.js": \`export default function App() {
+  return (
+    <>
+      <h1>Hello React</h1>
+      <img width="100" src="/public/logo.svg" />
+    </>
+  );
+}
+      \`,
+    }}
+    options={{
+      experimental_enableServiceWorker: true,
+    }}
+    template="react"
+  />
+);
+`}
+</CodeBlock>