Merge pull request #225 from code-hike/frameless-preview

Add preview frameless prop
code-hike · Jul 15, 2022 · ed3116e · ed3116e
2 parents 6a4fb32 + 94658a7
commit ed3116e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/packages/mdx/dev/content/scrollycoding-preview-jsx.mdx b/packages/mdx/dev/content/scrollycoding-preview-jsx.mdx
@@ -20,7 +20,7 @@ Create a `next.config.js` file at the root of your project.
 
 Here we use the [_`require("@next/mdx")`_](focus://1,6,8) plugin to set up MDX imports.
 
-<CH.Preview>
+<CH.Preview frameless>
   <div>Step 1</div>
   <div>Step 1</div>
   <div>Step 1</div>

diff --git a/packages/mdx/src/mdx-client/preview.tsx b/packages/mdx/src/mdx-client/preview.tsx
@@ -17,38 +17,43 @@ export function Preview({
   children,
   codeConfig,
   style,
+  frameless,
   ...rest
 }: {
   className: string
+  frameless?: boolean
   files: EditorStep["files"]
   presetConfig?: PresetConfig
   show?: string
   style?: React.CSSProperties
   children?: React.ReactNode
   codeConfig: { theme: EditorTheme }
 }) {
+  const kids = presetConfig ? (
+    <SandpackPreview
+      files={files}
+      presetConfig={presetConfig}
+    />
+  ) : (
+    children
+  )
   return (
     <div
       className={
         "ch-preview" + (className ? " " + className : "")
       }
       style={style}
     >
-      <MiniBrowser
-        loadUrl={show}
-        theme={codeConfig.theme}
-        {...rest}
-        children={
-          presetConfig ? (
-            <SandpackPreview
-              files={files}
-              presetConfig={presetConfig}
-            />
-          ) : (
-            children
-          )
-        }
-      />
+      {frameless ? (
+        kids
+      ) : (
+        <MiniBrowser
+          loadUrl={show}
+          theme={codeConfig.theme}
+          {...rest}
+          children={kids}
+        />
+      )}
     </div>
   )
 }