Docz: Is it possible to render react class inside the `Playground` component?

[pradel]

Question

First thank you for this awesome project 🚀

Description
I was wondering, can we render react class inside the Playground component?
For example like material ui is doing here https://material-ui.com/demos/dialogs/#simple-dialogs (you need to click on the "Show the source" button).
Thanks!

[nicholasess]

@pradel You can write out Playground like a text

[pradel]

Maybe more explanation, it's more how to do to write components with state, for example a modal with an open / close state, eg:

<Playground>
  {() => {
    class Test extends React.Component {
        state = { ... }
        // Class with a managed state
    }
    return <Test />
  }}
</Playground>

[nicholasess]

@pradel could please you upgrade docz? We sent a new release that what you want to do, work!

[sag1v]

@nicholasess can you post an example? i tried to do it with the latest version but i get:

Cannot read property 'toString' of undefined
Stack trace
in Po (created by BasePlayground)
in BasePlayground
in Component (at slideNext.mdx:17)
in div (created by MDXTag)
in MDXTag
in Component (at slideNext.mdx:10)
in Component (created by o)
in o (created by AsyncComponent)
in AsyncComponent (created by t)
in t
in b (created by s)
in s
in Component (created by AsyncRoute)
in div (created by Styled(div))
in Styled(div) (created by ConsumerMemoization)
in div (created by Styled(div))
in Styled(div) (created by ConsumerMemoization)
in div (created by Styled(div))
in Styled(div) (created by Xe)
in Xe (created by ConsumerMemoization)
in ConsumerMemoization
in CopyOnWriteConsumer
in ThemeConfig (created by ht)
in ht (created by AsyncRoute)
in AsyncRoute (created by t)
in t (created by ConsumerMemoization)
in t (created by ConsumerMemoization)
in ConsumerMemoization
in CopyOnWriteConsumer
in MDXProvider (created by DocPreview)
in DocPreview (created by ConsumerMemoization)
in ThemeProvider (created by ConsumerMemoization)
in ConsumerMemoization
in CopyOnWriteConsumer
in ThemeConfig (created by Component)
in Component (created by DoczTheme)
in DefaultWrapper (created by DoczTheme)
in t (created by t)
in t (created by DoczTheme)
in DataServer (created by DoczTheme)
in CopyOnWriteStoreProvider (created by DoczTheme)
in ErrorBoundary (created by DoczTheme)
in DoczTheme (at root.jsx:9)
in Root (created by HotExportedRoot)
in AppContainer (created by HotExportedRoot)
in HotExportedRoot (at index.jsx:15)

[three60five]

I think this should have an example in the docz.

[jamsch]

The "toString" error is because you need to define this.state in your constructor.

[drcmda]

It looks like react-live can take regular classes and functions without wrap, is this possible in Playground? It would be great to show examples unobstructed by boilerplate. {() => class ...} or React.createELement(class ...) still creates wraps.

I tried to do what @nicholasess said, writing it out as text "class extends React.Component {...}", but i either don't get what that means, or it doesn't seem to work.

Right now i implement Provider/Consumer wraps in my documentation, just to emulate classes: http://react-spring.surge.sh/transition#basics and i can imagine this doesn't look appealing to new users.

[danielbayerlein]

Here is a working example:

import { Playground } from 'docz'
import Modal from './'

<Playground>
  {() => {
    class Example extends React.Component {
      constructor (props) {
        super(props)

        this.state = { showModal: false }
      }

      handleShowModal () {
        this.setState({ showModal: true })
      }

      handleCloseModal () {
        this.setState({ showModal: false })
      }

      render () {
        return (
          <React.Fragment>
            {this.state.showModal &&
              <Modal
                title='Title'
                onClose={() => this.handleCloseModal()}
              >
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                  no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                  no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
              </Modal>
            }
            <button onClick={() => this.handleShowModal()}>Show Modal</button>
          </React.Fragment>
        )
      }
      }

    return <Example />
  }}
</Playground>

[pedronauck]

Fixed in the v0.12.9.
Now is possible to render a class directly inside the playground:

import { Playground } from 'docz'

<Playground>
  {class Counter extends React.Component {
    constructor() {
      super()
      this.state = { count: 0 }
    }

    componentDidMount() {
      this.interval = setInterval(() => {
        this.setState(state => ({ count: state.count + 1 }))
      }, 1000)
    }

    componentWillUnmount() {
      clearInterval(this.interval)
    }

    render() {
      return (
        <center>
          <h3>
            {this.state.count}
          </h3>
        </center>
      )
    }
  }}
</Playground>

[danielbayerlein]

@pedronauck Looks like it's no longer possible to render a class directly inside the playground with docz v0.13.7.

Code

<Playground>
  {class Example extends React.Component {
    constructor (props) {
      super(props)

      this.state = { showModal: false }
    }

    handleShowModal () {
      this.setState({ showModal: true })
    }

    handleCloseModal () {
      this.setState({ showModal: false })
    }

    render () {
      return (
        <React.Fragment>
          {this.state.showModal && <p>Lorem ipsum dolor sit amet</p>}
          <button onClick={() => this.handleCloseModal()}>Close Modal</button>
          <button onClick={() => this.handleShowModal()}>Show Modal</button>
        </React.Fragment>
      )
    }
  }}
</Playground>

Error

SyntaxError: Unexpected token (3:11)
1 : (<React.Fragment>
2 : class TestMyCode extends React.Component {
3 :   render() {
               ^

[sunkeysun]

Fixed in the v0.12.9.
Now is possible to render a class directly inside the playground:

import { Playground } from 'docz'

<Playground>
  {class Counter extends React.Component {
    constructor() {
      super()
      this.state = { count: 0 }
    }

    componentDidMount() {
      this.interval = setInterval(() => {
        this.setState(state => ({ count: state.count + 1 }))
      }, 1000)
    }

    componentWillUnmount() {
      clearInterval(this.interval)
    }

    render() {
      return (
        <center>
          <h3>
            {this.state.count}
          </h3>
        </center>
      )
    }
  }}
</Playground>

It is not work for v0.13.7.
Error

SyntaxError: Unexpected token (3:16) 1 : (<React.Fragment> 2 : class DemoModal extends React.Component { 3 : constructor() { ^

[sw-yx]

agree. please see #567 as many people have reported this issue

[HadeAs]

can someone fix this issue? @pedronauck