grapesjs-react

A React wrapper library for GrapesJS

Online Demo

Installation

npm i -S grapesjs grapesjs-react grapesjs-blocks-basic

or

yarn add grapesjs grapesjs-react grapesjs-blocks-basic

Usage

WebPage

You need to install the grapesjs-preset-webpage plugin

import 'grapesjs/dist/css/grapes.min.css';
import gjspresetwebpage from 'grapesjs-preset-webpage';
import gjsblockbasic from 'grapesjs-blocks-basic'

export const Primary = () => {
  return <GrapesjsReact
    id='grapesjs-react'
    plugins={[
      gjspresetwebpage,
      gjsblockbasic
    ]}
  />;
};

Newsletter

You need to install the grapesjs-preset-newsletter plugin

import 'grapesjs/dist/css/grapes.min.css';
import gjsblockbasic from 'grapesjs-blocks-basic'
import gjspresetnewsletter from 'grapesjs-preset-newsletter';

export const Newsletter = () => {
  return <GrapesjsReact
    id='grapesjs-react'
    plugins={[
      gjsblockbasic, 
      gjspresetnewsletter
    ]}
  />;
};

MJML

You need to install the grapesjs-mjml plugin

import 'grapesjs/dist/css/grapes.min.css';
import gjsblockbasic from 'grapesjs-blocks-basic'
import gjsmjml from 'grapesjs-mjml';

export const MJML = () => {
  return <GrapesjsReact
    id='grapesjs-react'
    plugins={[
      gjsblockbasic,
      gjsmjml
    ]}
  />;
};

Props detail

Editor's props extends the base GrapesJS editor options.

| Name | Desc | Type | | -- | -- | -- | | id | string | Editor container id | | children | ReactNode[] | Children to init (using fromElement) | | onInit | Function | Function will be called after editor was initialized | | onDestroy | Function | Function 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