CODEWITHSUNDEEP
reactjs
Dev
Dev

Reputation: 67

Integration grapes with React

How can I integrate grapejs with ReactJs, react dom is not rendering the grapes content inside it.

import React, { Component } from 'react'
import grapesjs from 'grapesjs';

class TemplateEditor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      template: null,
      editor: null,
    }
  }
  componentDidMount() {
    if(this.state.editor == null) {
      let editor = grapesjs.init({
        container: '#gjs',
        fromElement: true,
      });
      this.setState({editor})
      console.log(editor);
    }
  }
  render() {
    return(
      <main>
        <div id="gjs" ref={el => this.el = el}></div>
      </main>
    )
  }
}

export default TemplateEditor;

I am adding stylesheet directly to html file

Upvotes: 1

Views: 1925

Answers (1)

thanhtunguet
thanhtunguet

Reputation: 60

You called setState after creating the editor. ReactDOM will re-render the component and replace the div container which has id #gjs by a new one so that you can not see the editor rendered.

To use GrapesJS in React. You have to call editor.render() to get the dom content of the editor and render it by using dangerouslySetInnerHtml.

However, you may use this package https://www.npmjs.com/package/grapesjs-react to easy embed Grapes JS editor into React component

Upvotes: 1

Related Questions