grapesjs-react
A React wrapper library for GrapesJS
Installation
npm i -S grapesjs grapesjs-react grapesjs-blocks-basicor
yarn add grapesjs grapesjs-react grapesjs-blocks-basicUsage
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