previewRender should allow a react component as return value

Hello, I tried to integrate this in a project where we use react-markdown and would like to use the ReactMarkdown Component in previewRender to keep preview and live rendering consistent - sadly previewRender expects a string as far as i can see. So sth like:

<SimpleMDE
          value={this.state.text}
          onChange={this.setText}
          options={{
            previewRender (text) {
              return <ReactMarkdown
                source={text}
                renderers={{
                  CodeBlock: CodeRenderer,
                  Code: CodeRenderer
                }}
              />
            }
          }}
        />

is currently not possible.

[RIP21]

@btzr-io Just tested it. WORKS PERFECTLY 😄

import ReactDOMServer from "react-dom/server";

<SimpleMDEReact
          label="Markdown Editor"
          value={this.state.textValue1}
          onChange={this.handleChange1}
          options={{
            previewRender(plainText) {
              return ReactDOMServer.renderToString(<div>LOL</div>);
            }
          }}
        />

Giving me perfect LOL in the preview 😄

@ningappa use code above to solve your issue 😃

Will update Readme.md now.

[RIP21]

@btzr-io 😄 Should work tho.

@ningappa Make JSX in the preview seems impossible for me. We just expose here an option object here that basically create a new instance of SimpleMDE that we make controllable using React, we are unable to intervene into the previewRenderer here to make it JSX controllable. I will dig into the docs of SimpleMDE now but I’m not sure whether it’s possible. A workaround of @btzr-io looks good, not sure about the performance of such tho, and whether this function works on non-Node.js environment but web 😃