A React wrapper library for GrapesJS
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.
| 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