Can we add Custom React components as Blocks array to the Editor?

[muneeb71999]

I want to create a custom block when added to canvas I want to send and API request to an Endpoint and populate the data from the response.

Is there any way I can add custom Blocks. Because I can't find this in the documentation.

BTW great Tool and interface Thank you

[surajair]

@muneeb71999 :
Thank you for appreciation!

Yes, it is possible to register any custom react component and render inside the builder.
I will add the documentation on how to regsiter custom blocks.

if you want to explore a little, you can check how current blocks are registered.
https://github.com/chaibuilder/sdk/tree/main/src/blocks/web

You can register in similar way and import it on the builder and render page.

[muneeb71999]

Thanks you. I will have a look at this. 👍

[muneeb71999]

@surajair

registerChaiBlock(CollectionBlock, {
      type: "Collection",
      label: "Collection",
      category: "core",
      group: "basic",
      props: {
        styles: Styles({ default: "" }),
        tag: SelectOption({
          title: "Tag",
          default: "div",
          options: [
            { value: "div", title: "div" },
            { value: "header", title: "header" },
            { value: "footer", title: "footer" },
            { value: "section", title: "section" },
            { value: "article", title: "article" },
            { value: "aside", title: "aside" },
            { value: "main", title: "main" },
            { value: "nav", title: "nav" },
            { value: "figure", title: "figure" },
            { value: "details", title: "details" },
            { value: "summary", title: "summary" },
            { value: "dialog", title: "dialog" },
            { value: "strike", title: "strike" },
            { value: "caption", title: "caption" },
            { value: "legend", title: "legend" },
            { value: "figcaption", title: "figcaption" },
            { value: "mark", title: "mark" },
          ],
        }),
        src: SelectOption({
          title: "Background Image",
          default: "",
          options: [
            { value: "", title: "None" },
            {
              value: "https://images.unsplash.com/photo-1626480909816-3f1b3c2a6e3f",
              title: "Image 1",
            },
            {
              value: "https://images.unsplash.com/photo-1626480909816-3f1b3c2a6e3f",
              title: "Image 2",
            },
            {
              value: "https://images.unsplash.com/photo-1626480909816-3f1b3c2a6e3f",
              title: "Image 3",
            },
          ],
        }),
        collection: SelectOption({
          title: "Collection",
          default: "",
          options: [
            { value: "", title: "None" },
            ...collections,
          ],
          binding: true
        }),
      },
      canAcceptBlock: () => true,
    });
    ``` 
    I added custom Block but now I want to add an event listener onChange to collections SelectOption ? can you please share if there is any way to do this?

[surajair]

This feature will be avaialble in couple of weeks. You will be able to load dynamic select values based on other field values.

[muneeb71999]

Thanks. @surajair looking forward to it.

[surajair]

@muneeb71999 it is not possible as of now to conditionally change the dropdown values. This feature is part of roadmap.