Registering a custom block

To register a block with the Chai Builder, follow these steps.

1. Create a React component that represents your block.

2. Register the created component with the Chai Builder.

Chai Builder will automatically pass the necessary props to the component bases on the block configuration.

Note

blockProps is automatically added by the Chai Builder as prop to registered blocks. Spread this prop to the root element of your block to make it selectable.

import { registerChaiBlock, MultilineText, Styles } from '@chaibuilder/blocks';

// NOTE: blockProps is automatically generated by the Chai Builder
// which makes the block selectable.
// `styles` is the styles object which enables the user to change the styles of the block.
const SpecialHeading = ({blockProps, styles, content}) => {
  return (
    <h1 {...blockProps} {...styles}>{content}</h1>
  );
};

registerChaiBlock(SpecialHeading, {
  type: 'SpecialHeading', //unique block type
  label: 'Special Heading',
  category: 'Basic',
  props: {
    content: MultilineText({title: "Heading Conetent"}),
    styles: Styles({default: "text-3xl font-bold text-primary underline"})
  }
});

For more information on the block props configuration, see Controls.

That’s it! Your custom block is now registered and ready to be used within Chai Builder.