Strapi Blocks React Renderer

You can override the default rendering behavior by providing custom React components via the blocks and modifiers props. These custom components are merged with the defaults, allowing you to override only specific elements.

Blocks

Blocks are full-width, root-level elements. Supported types include:

• paragraph
• heading (receives level and plainText)
• list (receives format)
• quote
• code (receives plainText)
• image (receives image)
• link (receives url)

Modifiers

Modifiers are inline elements used to style text fragments within a block. Supported types include:

• bold
• italic
• underline
• strikethrough
• code

Important: When providing custom components, you must ensure that you render the children prop so that nested blocks and modifiers are correctly rendered.

import { BlocksRenderer } from '@strapi/blocks-react-renderer';

// Content should come from your Strapi API
const content = [
  {
    type: 'paragraph',
    children: [{ type: 'text', text: 'A simple paragraph' }],
  },
];

const App = () => {
  return (
    <BlocksRenderer
      content={content}
      blocks={{
        // You can use the default components to set class names...
        paragraph: ({ children }) => <p className="text-neutral900 max-w-prose">{children}</p>,
        // ...or point to a design system
        heading: ({ children, level }) => {
          switch (level) {
            case 1: return <Typography variant="h1">{children}</Typography>
            case 2: return <Typography variant="h2">{children}</Typography>
            case 3: return <Typography variant="h3">{children}</Typography>
            case 4: return <Typography variant="h4">{children}</Typography>
            case 5: return <Typography variant="h5">{children}</Typography>
            case 6: return <Typography variant="h6">{children}</Typography>
            default: return <Typography variant="h1">{children}</Typography>
          }
        },
        // For links, you may want to use the component from your router or framework
        link: ({ children, url }) => <Link to={url}>{children}</Link>,
      }}
      modifiers={{
        bold: ({ children }) => <strong>{children}</strong>,
        italic: ({ children }) => <span className="italic">{children}</span>,
      }}
    />
  );
};

When customizing the @strapi/blocks-react-renderer, you can provide custom React components for text modifiers. The renderer identifies modifiers based on the keys present in a TextInlineNode.

Available modifier keys include:

• bold
• italic
• underline
• strikethrough
• code

If you provide a component for a modifier key in your components prop, the renderer will wrap the text node with that component. If a modifier is present in the data but no component is provided in the context, a warning is logged to the console: [@strapi/block-react-renderer] No component found for modifier "<modifierName>".

// Example of how modifiers are structured in the data
const textNode = {
  type: 'text',
  text: 'Hello World',
  bold: true,
  italic: true
};

// When rendering, the renderer looks for components matching the keys:
// components={{ 
//   bold: ({ children }) => <strong>{children}</strong>, 
//   italic: ({ children }) => <em>{children}</em> 
// }}