fix(docs): Change Layout to Provider for accepting theme prop (#1133)

codesandbox · May 6, 2024 · e07adc0 · e07adc0
1 parent 63b4a45
commit e07adc0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/website/docs/src/pages/advanced-usage/components.mdx b/website/docs/src/pages/advanced-usage/components.mdx
@@ -66,7 +66,7 @@ export default () => (
 `}
 </CodeBlock>
 
-`SandpackLayout` accepts a `theme` prop, so you can pass in your [custom theme object or a predefined theme](/themes).
+`SandpackProvider` accepts a `theme` prop, so you can pass in your [custom theme object or a predefined theme](/advanced-usage#sandpack-provider).
 
 ## Preview
 
@@ -575,19 +575,19 @@ export default () => (
 <details>
   <summary>`SandpackConsole` Options</summary>
 
-| Prop                    | Description                                                                              | Type                                  | Default              |
-| :---------------------- | :--------------------------------------------------------------------------------------- | :------------------------------------ | :------------------- |
-| `clientId`              |                                                                                          | `string`                              | `undefined`           |
-| `showHeader`            |                                                                                          | `boolean`                             | `true`               |
-| `showSyntaxError`       |                                                                                          | `boolean`                             | `false`              |
-| `showResetConsoleButton` |                                                                                         | `boolean`                             | `true`               |
-| `showRestartButton`     |                                                                                          | `boolean`                             | `true`               |
-| `maxMessageCount`       |                                                                                          | `number`                              | `800`                |
-| `onLogsChange`          |                                                                                          | `(logs: SandpackConsoleData) => void` |                      |
-| `resetOnPreviewRestart` | Reset the console list on every preview restart                                          | `boolean`                             | `false`              |
-| `ref`                   | Make possible to imperatively interact with the console component                        | `SandpackConsoleRef`                  | `SandpackConsoleRef` |
-| `standalone`            | It runs its sandpack-client, meaning it doesn't depend on a `SandpackPreview` component. | `boolean`                             | `false`              |
-| `actionsChildren`       |                                                                                          | JSX.Element                           | `null`               |
+| Prop                     | Description                                                                              | Type                                  | Default              |
+| :----------------------- | :--------------------------------------------------------------------------------------- | :------------------------------------ | :------------------- |
+| `clientId`               |                                                                                          | `string`                              | `undefined`          |
+| `showHeader`             |                                                                                          | `boolean`                             | `true`               |
+| `showSyntaxError`        |                                                                                          | `boolean`                             | `false`              |
+| `showResetConsoleButton` |                                                                                          | `boolean`                             | `true`               |
+| `showRestartButton`      |                                                                                          | `boolean`                             | `true`               |
+| `maxMessageCount`        |                                                                                          | `number`                              | `800`                |
+| `onLogsChange`           |                                                                                          | `(logs: SandpackConsoleData) => void` |                      |
+| `resetOnPreviewRestart`  | Reset the console list on every preview restart                                          | `boolean`                             | `false`              |
+| `ref`                    | Make possible to imperatively interact with the console component                        | `SandpackConsoleRef`                  | `SandpackConsoleRef` |
+| `standalone`             | It runs its sandpack-client, meaning it doesn't depend on a `SandpackPreview` component. | `boolean`                             | `false`              |
+| `actionsChildren`        |                                                                                          | JSX.Element                           | `null`               |
 
 </details>
 

diff --git a/website/docs/src/pages/advanced-usage/index.mdx b/website/docs/src/pages/advanced-usage/index.mdx
@@ -29,12 +29,13 @@ components that are exported by the main package (eg: `SandpackCodeEditor`,
 } from "@codesandbox/sandpack-react";
 
 const CustomSandpack = () => (
-  <SandpackProvider>
-    <SandpackLayout>
-      <SandpackCodeEditor />
-      <SandpackPreview />
-    </SandpackLayout>
-  </SandpackProvider>
+
+<SandpackProvider template="vanilla" theme="auto">
+  <SandpackLayout>
+    <SandpackCodeEditor />
+    <SandpackPreview />
+  </SandpackLayout>
+</SandpackProvider>
 );
 
 export default () => <CustomSandpack />