grapesjs-react

React wrapper for GrapesJS

grapesjs-react v3.0.0 was fully rewritten from scratch. The package is now only responsible to expose hooks and control the editor lifecycle for these reasons:

• This package depends on artf/grapesjs, which does not support Typescript. It is hard to implement custom features Components, Blocks without declaration files.
• To be simple, this package should only control the lifecycle of the editor, leave the rest to the dependent projects.

New hooks:

New editor props:

export interface IEditorProps {
  id?: string;

  presetType?: 'webpage' | 'newsletter' | 'mjml';

  plugins?: string[];

  children?: ReactElement<any> | Array<ReactElement<any>>;

  storageManager?: any;

  blockManager?: any;

  styleManager?: {};

  width?: string | number;

  height?: string | number;

  components?: object[];

  blocks?: object[];

  onInit?(editor): void;

  onDestroy?(editor): void;
}

Default props of the editor:

Editor.defaultProps = {
  id: 'grapesjs-react-editor',
  presetType: 'newsletter',
  plugins: [],
  blocks: [],
  blockManager: {},
  storageManager: {},
  styleManager: {},
  width: 'auto',
  height: '100vh',
  components: [],
};

Introduce new hooks:

• onInit: Called after editor initializing, used for adding custom components, blocks, etc, ...
• onDestroy: Called before editor unmounting, used for cleaning up.

See storybook demo: https://grapesjs-react.thanhtunguet.info