Is it possible to create a component using react components?
Question
is it possible to create or get a react component from some library and insert as a allowed component for create a template?
import React from 'react';
import CustomButton from './components/CustomButton'
import grapesjs from 'grapesjs'
const editor = grapesjs.init({
...
});
editor.addComponents(<CustomButton color="red" otherProp={...somepros}/>);
//or
editor.BlockManager.add('CustomButton', {
label: 'button',
content: <CustomButton color="red" otherProp={...somepros}/>,
});
Answers (1)
@TRUEND here is an example Cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #951
[QUESTION] Selection of custom components not possible from canvas.
Hey, I tried to figure this out by myself, but I'm feeling I'm going a little bit in circles. So I hope you will have some time to read thi...
Issue #3727
Issue on Style Import
Hi @artf, Describe the bug detailed While creating a new template using GrapesJS, I came across a scenario that, when we try to import CSS...
Issue #3446
Cannot Store Data Unexpected token '-'
Please Help Me, I Want To Store gjs data to mysql but i cannot get any data from front end to back end here my code: const editor = grapesj...
Issue #3137
When I select an particular element I'm not getting its styles. This issue happens only with some elements.
Not getting styles of the selected element Here is my code, const model = editor.StyleManager.getModelToStyle(component); let styleObject =...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.