Issue #1964πŸ’¬ AnsweredOpened April 13, 2019by richbai900 reactions

Minimal requirements to create a custom component

Quick answerby artf

First of all, start using the improved definition of components. In your example, the content: (<div>Foo</div>), will be compiled to an object, and when you add an object/array of objects to the editor, it means you don't need the parsing process anymore so you never hit isComponent, therefore that type is not initial...

Read full answer below ↓

Question

I've been reading the docs all day on creating a custom component. I've also looked at grapesjs-mjml for an example. I'm trying to create a base type for react components that can be extended as needed, but at the moment all I want to see is which lifecycle methods are called and when. I'm trying to work out the difference between render and toHTML specifically. I've created just a bare bones component with some logging, and it doesn't seem to be working. Here is my code I'm passing a React component as the content, which I expect not to render currently, but I'm not getting a single log in m...

Answers (2)

artfβ€’ April 13, 2019

First of all, start using the improved definition of components. In your example, the content: (<div>Foo</div>), will be compiled to an object, and when you add an object/array of objects to the editor, it means you don't need the parsing process anymore so you never hit isComponent, therefore that...

lock[bot]β€’ April 15, 2020

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.