Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thanhtunguet/grapesjs-react
A React wrapper for GrapesJS library
https://github.com/thanhtunguet/grapesjs-react
grapesjs javascript library react
Last synced: 4 days ago
JSON representation
A React wrapper for GrapesJS library
- Host: GitHub
- URL: https://github.com/thanhtunguet/grapesjs-react
- Owner: thanhtunguet
- Created: 2019-02-23T05:12:58.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-12-12T04:17:12.000Z (about 2 months ago)
- Last Synced: 2025-01-15T14:21:09.770Z (11 days ago)
- Topics: grapesjs, javascript, library, react
- Language: JavaScript
- Homepage: https://thanhtunguet.github.io/grapesjs-react
- Size: 28.6 MB
- Stars: 197
- Watchers: 8
- Forks: 58
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
grapesjs-react
==============
_A React wrapper library for [GrapesJS](https://grapesjs.com)_
[Online Demo](https://thanhtunguet.github.io/grapesjs-react)
## Installation
```shell
npm i -S grapesjs grapesjs-react grapesjs-blocks-basic
```
or
```shell
yarn add grapesjs grapesjs-react grapesjs-blocks-basic
```
## Usage
#### WebPage
You need to install the [grapesjs-preset-webpage](https://www.npmjs.com/package/grapesjs-preset-webpage) plugin
```tsx
import 'grapesjs/dist/css/grapes.min.css';
import gjspresetwebpage from 'grapesjs-preset-webpage';
import gjsblockbasic from 'grapesjs-blocks-basic'
export const Primary = () => {
return ;
};
```
#### Newsletter
You need to install the [grapesjs-preset-newsletter](https://www.npmjs.com/package/grapesjs-preset-newsletter) plugin
```tsx
import 'grapesjs/dist/css/grapes.min.css';
import gjsblockbasic from 'grapesjs-blocks-basic'
import gjspresetnewsletter from 'grapesjs-preset-newsletter';
export const Newsletter = () => {
return ;
};
```
#### MJML
You need to install the [grapesjs-mjml](https://www.npmjs.com/package/grapesjs-mjml) plugin
```tsx
import 'grapesjs/dist/css/grapes.min.css';
import gjsblockbasic from 'grapesjs-blocks-basic'
import gjsmjml from 'grapesjs-mjml';
export const MJML = () => {
return ;
};
```
## 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](https://thanhtunguet.github.io)