Custom builder component

This section will present how to interact with the Block properties allowing the users to edit the Block properties in the page builder.

How to

When creating a Block, the Block will inherit the property onEditProps used to edit the properties of the Block.

You can also use it in association with the property isAdmin to apply your custom logic only when it's on the page builder.

import React from "react";
import { SuncelBlock } from "@suncel/nextjs";

type BlockNameProps = {
  data: any[];
};

export const BlockName: SuncelBlock<BlockNameProps> = ({ data, isAdmin, onEditProps }) => {
  return (
    <div className=''>
      {isAdmin && (
        <button
          onClick={async () => {
            `fetch data example`
            const res = (await fetch("/api/endpoint").then((res) => res.json()));

           `Update the data property with the fetched result`

            onEditProps?.("data", res);
          }}
        >
          Generate data
        </button>
      )}
      {data?.map((elem, idx) => {
        `display the data`
        return <div key={idx}>
          ...
        </div>;
      })}
    </div>
  );
};

BlockName.suncel = {
  slug: "BlockName",
  displayName: "Bloc kName",
};

Link

Overview