Render Blocks

1import type { User as PayloadUser } from "~/payload-types";
2import React, { type ComponentPropsWithRef, type ElementType } from "react";
3import { type Block } from "payload";
4 
5type Params = Promise<{ slug: string }>;
6type PageParams = Partial<Awaited<Params>>;
7type SearchParams = Promise<Record<string, string | string[] | undefined>>;
8type PageSearchParams = Partial<Awaited<SearchParams>>;
9 
10export interface RenderBlocksContext extends ComponentPropsWithRef<"div"> {
11	blocks: Block[] | unknown[];
12	blockComponents: Record<string, ElementType>;
13	user?: PayloadUser | null;
14	params?: PageParams;
15	searchParams?: PageSearchParams;
16	mobileView?: boolean;
17}
18 
19const RenderBlocks: React.FC<RenderBlocksContext> = (props) => {
20	const {
21		blocks,
22		blockComponents,
23		params,
24		searchParams,
25		user,
26		mobileView = false,
27		...divProps
28	} = props;
29	const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;
30 
31	if (blocks.length && hasBlocks) {
32		return (
33			blocks
34				// @ts-expect-error check if block has custom 'hidden' field
35				.filter((b) => !Boolean(b?.hidden))
36				.map((block, index) => {
37					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
38					// @ts-expect-error
39					const { blockName, blockType, key: blockKey } = block;
40 
41					if (blockType && blockType in blockComponents) {
42						// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
43						const Block = blockComponents[blockType];
44 
45						if (Block) {
46							return (
47								<Block
48									// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
49									id={blockName}
50									params={params}
51									searchParams={searchParams}
52									user={user}
53									// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
54									key={blockKey ?? index}
55									block={block}
56									index={index}
57									mobileView={mobileView}
58									{...(block as Block)}
59									{...divProps}
60								/>
61							);
62						}
63					}
64					return null;
65				})
66		);
67	}
68 
69	return null;
70};
71 
72export default RenderBlocks;