Home grapesjs-react
Post
Cancel

grapesjs-react

A React wrapper library for GrapesJS

Online Demo

Installation

1
npm i -S grapesjs grapesjs-react

or

1
yarn add grapesjs grapesjs-react

Usage

WebPage

You need to install the grapesjs-preset-webpage plugin

1
2
3
4
5
6
7
8
9
10
import "grapesjs-preset-webpage";

export const Primary = () => {
  return (
    <GrapesjsReact
      id="grapesjs-react"
      plugins={["gjs-preset-webpage", "gjs-blocks-basic"]}
    />
  );
};

Newsletter

You need to install the grapesjs-preset-newsletter plugin

1
2
3
4
5
6
7
8
9
10
import "grapesjs-preset-newsletter";

export const Newsletter = () => {
  return (
    <GrapesjsReact
      id="grapesjs-react"
      plugins={["gjs-preset-newsletter", "gjs-blocks-basic"]}
    />
  );
};

MJML

You need to install the grapesjs-mjml plugin

1
2
3
4
5
6
7
8
9
10
import "grapesjs-mjml";

export const MJML = () => {
  return (
    <GrapesjsReact
      id="grapesjs-react"
      plugins={["grapesjs-mjml", "gjs-blocks-basic"]}
    />
  );
};

Props detail

Editor’s props extends the base GrapesJS editor options.

NameDescType
idstringEditor container id
childrenReactNode[]Children to init (using fromElement)
onInitFunctionFunction will be called after editor was initialized
onDestroyFunctionFunction will be called when editor unmounted

The rest props will be passed as options to initialize editor. You can use any options of grapesjs like plugins, blockManager, styleManager, storageManager, …

Contribution

If you find a bug or need any help, please create an issue.

Pull requests are welcome.

©2021 thanhtunguet

This post is licensed under CC BY 4.0 by the author.