Improve typing & pass children to custom components

Co-Authored-By: Tobias Lins <me@tobi.sh>

Author: timolins

src/block.tsx

@@ -6,8 +6,8 @@ import {
   BlockMapType,
   MapPageUrl,
   MapImageUrl,
-  BlockValueTypeKeys,
-  CustomComponent
+  CustomComponents,
+  BlockValueProp
 } from "./types";
 import Asset from "./components/asset";
 import Code from "./components/code";
@@ -64,7 +64,7 @@ interface Block {
 
   fullPage?: boolean;
   hideHeader?: boolean;
-  customComponents?: Record<BlockValueTypeKeys, CustomComponent>;
+  customComponents?: CustomComponents;
 }
 
 export const Block: React.FC<Block> = props => {
@@ -83,10 +83,15 @@ export const Block: React.FC<Block> = props => {
 
   // render a custom component first if passed.
   if (customComponents && customComponents[blockValue?.type]) {
-    const CustomComponent = customComponents[blockValue?.type] as any;
-    return <CustomComponent blockValue={blockValue} />;
+    const CustomComponent = customComponents[blockValue?.type]!;
+    return (
+      <CustomComponent
+        blockValue={blockValue as BlockValueProp<typeof blockValue.type>}
+      >
+        {children}
+      </CustomComponent>
+    );
   }
-
   switch (blockValue?.type) {
     case "page":
       if (level === 0) {

src/renderer.tsx

@@ -3,7 +3,7 @@ import {
   BlockMapType,
   MapPageUrl,
   MapImageUrl,
-  CustomComponent
+  CustomComponents
 } from "./types";
 import { Block } from "./block";
 import { defaultMapImageUrl, defaultMapPageUrl } from "./utils";
@@ -17,7 +17,7 @@ export interface NotionRendererProps {
 
   currentId?: string;
   level?: number;
-  customComponents?: Record<string, CustomComponent>;
+  customComponents?: CustomComponents;
 }
 
 export const NotionRenderer: React.FC<NotionRendererProps> = ({

src/types.ts

@@ -294,7 +294,7 @@ export type BlockValueType =
   | CollectionValueType
   | TweetType;
 
-export type BlockValueTypeKeys = Pick<BlockValueType, "type">["type"];
+export type BlockValueTypeKeys = BlockValueType["type"];
 
 export interface BlockType {
   role: string;
@@ -342,8 +342,17 @@ export interface LoadPageChunkData {
 export type MapPageUrl = (pageId: string) => string;
 export type MapImageUrl = (image: string) => string;
 
-export interface CustomComponentProps {
-  blockValue: BlockValueType;
+export type BlockValueProp<T> = Extract<BlockValueType, { type: T }>;
+
+export interface CustomComponentProps<T extends BlockValueTypeKeys> {
+  blockValue: T extends BlockValueType
+    ? Extract<BlockValueType, { type: T }>
+    : BaseValueType;
 }
 
-export type CustomComponent = FC<CustomComponentProps>;
+export type CustomComponent<T extends BlockValueTypeKeys> = FC<
+  CustomComponentProps<T>
+>;
+export type CustomComponents = {
+  [K in BlockValueTypeKeys]?: CustomComponent<K>;
+};