feat: use custom render method on section

packages/docz-react/package.json

@@ -19,6 +19,7 @@
     "tslint": "tslint --project ."
   },
   "dependencies": {
+    "docz": "^0.0.1",
     "prop-types": "^15.6.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",

packages/docz-react/src/index.ts

@@ -1,13 +1,17 @@
+import * as ReactDOM from 'react-dom'
 import { Doc } from 'docz/doc'
 import { cache } from './Docs'
 
+export { theme } from './theme'
+export { Docs } from './Docs'
+export { DocObj, Section } from 'docz/doc'
+
+const render = (child: any, container: HTMLElement) =>
+  ReactDOM.createPortal(child(), container)
+
 export const doc = (name: string): Doc => {
-  const newDoc = new Doc(name)
+  const newDoc = new Doc(name, render)
 
   cache.set(name, newDoc)
   return newDoc
 }
-
-export { theme } from './theme'
-export { Docs } from './Docs'
-export { DocObj, Section } from 'docz/doc'

packages/docz-theme-default/src/components/Doc.tsx

@@ -5,6 +5,7 @@ import { Toggle } from 'react-powerplug'
 import * as Icon from 'react-feather'
 
 import { Highlight } from './Highlight'
+import { Render } from './Render'
 import * as colors from '../styles/colors'
 
 const Container = styled('div')`
@@ -50,7 +51,7 @@ const Section = styled('div')`
   margin-top: 40px;
 `
 
-const Render = styled('div')`
+const RenderWrapper = styled('div')`
   position: relative;
   padding: 10px;
   background: white;
@@ -74,30 +75,30 @@ const CodeButton = styled('button')`
   transform: translate(1px, 100%);
 `
 
-interface DocSectionProps {
-  section: Section
-}
-
 interface ToggleProps {
   toggle: () => void
   on: boolean
 }
 
+interface DocSectionProps {
+  section: Section
+}
+
 const DocSection: SFC<DocSectionProps> = ({ section }) => (
   <Section key={section.id}>
     {section.title && <h3>{section.title}</h3>}
     <Toggle initial={false}>
       {({ toggle, on }: ToggleProps) => (
-        <Render>
+        <RenderWrapper>
           {on ? (
             <Highlight language="jsx">{section.code}</Highlight>
           ) : (
-            <div>{section.render()}</div>
+            <Render render={section.render} />
           )}
           <CodeButton onClick={toggle}>
             <Icon.Code width={15} />
           </CodeButton>
-        </Render>
+        </RenderWrapper>
       )}
     </Toggle>
   </Section>

packages/docz-theme-default/src/components/Render.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Component } from 'react'
+
+interface RenderProps {
+  render: (container: HTMLElement) => any
+}
+
+interface RenderState {
+  container: HTMLElement | null
+}
+
+export class Render extends Component<RenderProps, RenderState> {
+  private container: HTMLElement | null
+
+  constructor(props: RenderProps) {
+    super(props)
+    this.container = null
+
+    this.state = {
+      container: null,
+    }
+  }
+
+  public componentDidMount(): void {
+    if (this.container) {
+      this.setState({ container: this.container })
+    }
+  }
+
+  public render(): JSX.Element {
+    const { render } = this.props
+    const { container } = this.state
+
+    return (
+      <div ref={node => (this.container = node)}>
+        {container && render(container)}
+      </div>
+    )
+  }
+}

packages/docz/src/Doc.ts

@@ -8,7 +8,7 @@ export interface Section {
   id: string
   title?: string
   code?: string
-  render: () => any
+  render: (container: HTMLElement) => any
 }
 
 export interface DocConstructorArgs {
@@ -34,6 +34,8 @@ export interface Entry {
   sections: string[]
 }
 
+export type RenderFn = (child: any, container: HTMLElement) => void
+
 export class Doc {
   private _name: string
   private _route: string
@@ -43,12 +45,14 @@ export class Doc {
   private _filepath: string | undefined
   private _category: string | undefined
   private _sections: Section[]
+  private _render: RenderFn
 
-  constructor(name: string) {
+  constructor(name: string, render: RenderFn) {
     this._name = name
     this._sections = []
     this._route = `/${slugify(name)}`
     this._order = 0
+    this._render = render
 
     return this
   }
@@ -73,10 +77,11 @@ export class Doc {
   public section(...args: any[]): Doc {
     const [title, renderMethod] = args
     const render = isFn(title) ? title : renderMethod
+    const id = ulid()
 
     this._sections.push({
-      render,
-      id: ulid(),
+      id,
+      render: (container: HTMLElement) => this._render(render, container),
       ...(title && !isFn(title) && { title }),
     })