- Notifications
You must be signed in to change notification settings - Fork40
GrapesJS/react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Requires GrapesJS v0.21.3 or higher
The officialGrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.
The goal of this library is not to provide UI components but simple wrappers around the core GrapesJS modules and let you define your own UI components and access easily the GrapesJS API.
Warning: This library is NOT intended to render your React components inside the GrapesJS canvas, here it's all about the custom UI around the canvas itself.
The coregrapesjs library is not bundled with the wrapper itself so you have to install it separately.
npm i grapesjs @grapesjs/react
- React v18.X
- GrapesJS v0.21.3 or higher
- NextJS v14.X
- React v18.X or v19.X
- GrapesJS v0.22.5 or higher
- NextJS v15.X
This is the simplest and more traditional way to use the wrapper with GrapesJS as it relies on the default UI provided by GrapesJS. This approach is less customizable from React perspective and all the UI customization has to be done via GrapesJS (basically how you would do without the wrapper).
importgrapesjs,{Editor}from'grapesjs';importGjsEditorfrom'@grapesjs/react';exportdefaultfunctionDefaultEditor(){constonEditor=(editor:Editor)=>{console.log('Editor loaded',{ editor});};return(<GjsEditor// Pass the core GrapesJS library to the wrapper (required).// You can also pass the CDN url (eg. "https://unpkg.com/grapesjs")grapesjs={grapesjs}// Load the GrapesJS CSS file asynchronously from URL.// This is an optional prop, you can always import the CSS directly in your JS if you wish.grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"// GrapesJS init optionsoptions={{height:'100vh',storageManager:false,}}onEditor={onEditor}/>);}
This is the more powerful and declarative way to use the wrapper as it gives you full control over the UI of your editor. Using the<Canvas/> component inside the main wrapper will disable the core default UI.
importgrapesjs,{Editor}from'grapesjs';importGjsEditor,{Canvas}from'@grapesjs/react';exportdefaultfunctionCustomEditor(){constonEditor=(editor:Editor)=>{console.log('Editor loaded',{ editor});};return(<GjsEditorgrapesjs={grapesjs}grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"onEditor={onEditor}options={{height:'100vh',storageManager:false,}}><div>// ... use your UI components<Canvas/>// place the GrapesJS canvas where you wish// ...</div></GjsEditor>);}
Here below you can find a good example (with the usage of all available providers) of how you would build a full custom editor around GrapesJS by using your own React components.
Note: The app doesn't cover all theGrapesJS API but simply provides a good starting point to understand how to create your own custom editor.
You can easily access the editor instance in your custom components by using theuseEditor hook. One only caveat is to use it once the editor is actually created and for this use case, you can rely on the<WithEditor> component as a wrapper. Alternatively, you can useuseEditorMaybe hook and check by yourself if the editor exists.
importGjsEditor,{WithEditor,useEditor,useEditorMaybe}from'@grapesjs/react';functionMyComponentWithUseEditor(){// The `editor` is always defined.consteditor=useEditor();return(...);}functionMyComponentWithUseEditorMaybe(){// The `editor` is not immediately availableconsteditor=useEditorMaybe();return(<div><div>Iwillberenderedimmediately</div><div>Editor:{editor ?'created' :'not yet created'}.</div></div>);}exportdefaultfunctionCustomEditor(){return(<GjsEditor ...>// ...<WithEditor>// This component won't be rendered until the editor is created<MyComponentWithUseEditor/></WithEditor><MyComponentWithUseEditorMaybe/></GjsEditor>);}
By using components inside the built-in providers, the
editoris always defined.
Clone the repository
$ git clone https://github.com/GrapesJS/react.git$cd reactInstall it
$ yarn i
Start the dev server
$ yarn start
MIT
About
GrapesJS React
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.