Custom Block Rendering

You can override any default block component by passing a customBlocks object to the renderer.

Example: Overriding Headings

If you want to use custom CSS classes for headings:

import { JsonpressBlockRenderer } from 'jsonpress-block-renderer';

const MyHeading = ({ data }) => (
  <h2 className="text-blue-500 font-bold">{data.text}</h2>
);

const customBlocks = {
  heading: MyHeading
};

function Page({ blocks }) {
  return (
    <JsonpressBlockRenderer
      data={blocks}
      customBlocks={customBlocks}
    />
  );
}

Handling New Block Types

If you define a custom block type in your dashboard, you can render it by adding it to the customBlocks object.

const TwitterEmbed = ({ data }) => (
  <blockquote className="twitter-tweet">
    <a href={data.url}>{data.url}</a>
  </blockquote>
);

const customBlocks = {
  tweet: TwitterEmbed
};

Component Data Prop

Each custom component receives a data prop containing the properties of that block as defined in the JSON API.