Home

GrapesJS React Integration

The first integration of GrapesJS for React.

1. Installation

   yarn add grapesjs-react

2. Usage Editor:

   import React, {Component} from 'react';
   import {GEditor} from 'grapesjs-react';
   
   class GEditorExample extends Component {
    render() {
      return (
        <GEditor/>
        );
      }
   }
   
   export default GEditorExample;

   Custom block src/example/CustomBlock.tsx:

   import React from 'react';
   import {GEditor, GBlock} from 'grapesjs-react';   
   import 'antd/dist/antd.min.css';
   import 'bootstrap/dist/css/bootstrap.min.css';
   
   class SimpleBlock extends GBlock {
     content = `<div class="simple-block"> This is a simple block </div>`;
   
     constructor() {
       super('simple-block', 'Simple Block');
     }
   }
   
   function CustomBlock() {
     return (
       <div className="container-fluid">
         <div>
           <GEditor id="geditor" newsletter blocks={[
             new SimpleBlock(),
           ]}/>
         </div>
       </div>
     );
   }
   
   export default CustomBlock;

3. Options

   Props	Description	Type	Default Value
   components	Custom components	Array	Empty
   plugins	Additional plugins	Array	Empty
   newsletter	Apply newsletter preset	boolean	false
   webpage	Apply webpage preset	boolean	false

• This package does not include CSS, so you have to import css from grapesjs package manually.

  import 'grapesjs/dist/css/grapes.min.css';