fix(docz): add wrapper prop on Playground

packages/docz/src/components/DocPreview.tsx

@@ -10,12 +10,16 @@ export type PageProps = RouteComponentProps<any> & {
   doc: Entry
 }
 
-const Identity: SFC<any> = ({ children }) => <Fragment>{children}</Fragment>
+export const Identity: SFC<any> = ({ children }) => (
+  <Fragment>{children}</Fragment>
+)
+
 const DefaultLoading: SFC = () => <Fragment>Loading</Fragment>
 
 export interface RenderComponentProps {
   className?: string
   style?: any
+  wrapper?: ComponentType<any>
   components: ComponentsMap
   component: JSX.Element
   position: number

packages/docz/src/components/Playground.tsx

@@ -1,39 +1,43 @@
 import * as React from 'react'
-import { SFC } from 'react'
+import { ComponentType, SFC } from 'react'
 import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
 
 import { isFn } from './Docs'
-import { ComponentsMap } from './DocPreview'
+import { ComponentsMap, Identity } from './DocPreview'
 
 export interface PlaygroundProps {
+  components: ComponentsMap
   className?: string
   style?: any
-  components: ComponentsMap
+  wrapper?: ComponentType<any>
+  children: any
   __position: number
   __code: (components: ComponentsMap) => any
   __rawCode: string
-  children: any
 }
 
 const BasePlayground: SFC<PlaygroundProps> = ({
   components,
   className,
   style,
+  wrapper: Wrapper = Identity,
   children,
   __position,
   __code,
   __rawCode,
 }) => {
   return components && components.render ? (
-    <components.render
-      className={className}
-      style={style}
-      components={components}
-      component={isFn(children) ? children() : children}
-      position={__position}
-      code={__code(components)}
-      rawCode={__rawCode}
-    />
+    <Wrapper>
+      <components.render
+        className={className}
+        style={style}
+        components={components}
+        component={isFn(children) ? children() : children}
+        position={__position}
+        code={__code(components)}
+        rawCode={__rawCode}
+      />
+    </Wrapper>
   ) : null
 }