Docz: Extend Playground component

[criles25]

Question

I am trying to extend the <Playground /> component.

import React from 'react';
import { Playground } from 'docz';

class LoftPlayground extends React.Component {
    componentDidMount() {
        const event = new CustomEvent('loft');
        window.dispatchEvent(event);
    }

    componentDidUpdate() {
        const event = new CustomEvent('loft');
        window.dispatchEvent(event);
    }

    render() {
        // return (<div>{this.props.children}</div>);
        return (<Playground {...this.props}/>);
    }
}

export {LoftPlayground};

My particular use case is I need to call a custom event on componentDidUpdate and componentDidMount. When I try to do ^, I get the error:

(LoftPlayground, in RenderBase (created by Context.Consumer)) TypeError: Cannot read property 'toString' of undefined

Stack trace:
at get$1 (webpack-internal:///./node_modules/docz-theme-default/dist/index.m.js:1856:40)
in RenderBase (created by Context.Consumer)
in ThemeConfig (created by Render)
in Render (created by BasePlayground)
in BasePlayground (created by Context.Consumer)
in Component (at PlaygroundWrapper.js:17)
in LoftPlayground (at Accordion/index.mdx:24)
in div (created by MDXTag)
in MDXTag (created by Context.Consumer)
in Component (at Accordion/index.mdx:18)
in MDXContent (created by AsyncComponent)
in AsyncComponent (created by ExportedComponent)
in ExportedComponent (created by Context.Consumer)
in Component (created by UnconnectedReactImportedComponent)
in UnconnectedReactImportedComponent (created by ReactImportedComponent)
in ReactImportedComponent (created by ImportedComponent)
in ImportedComponent (created by ForwardRef)
in ForwardRef (created by AsyncRoute)
in div (created by Context.Consumer)
in Styled(div) (created by Context.Consumer)
in div (created by Context.Consumer)
in Styled(div) (created by Context.Consumer)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Context.Consumer)
in ThemeConfig (created by Page)
in Page (created by AsyncRoute)
in AsyncRoute (created by Route)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in MDXProvider (created by DocPreview)
in DocPreview (created by Context.Consumer)
in ThemeProvider (created by Context.Consumer)
in ThemeConfig (created by Theme)
in Theme (created by Theme)
in ScrollToTopBase (created by Route)
in Route (created by withRouter(ScrollToTopBase))
in withRouter(ScrollToTopBase) (created by Theme)
in Router (created by BrowserRouter)
in BrowserRouter (created by Router)
in Router (created by Theme)
in DataServer (created by Theme)
in StateProvider (created by Theme)
in ErrorBoundary (created by Theme)
in Theme (at root.jsx:5)
in Root (created by HotExportedRoot)
in AppContainer (created by HotExportedRoot)
in HotExportedRoot (at app/index.jsx:14)

I am trying to avoid putting a wrapper nested inside the children of <Playground>, that way I can avoid having the markup appear in the code editor.

Is it possible to extend the <Playground> component?

Your library is awesome btw, thanks. My company is using docz to build out the documentation for our design system.

[joeljeske]

I had to name my component "Playground" and not something else, I think the build stuff looks for that component exactly and does specify transforms

[criles25]

That did the trick. Thank you @joeljeske !