Add Ability to Overwrite Collection View With Custom Components

packages/react-notion-x/src/third-party/collection-view.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { useNotionContext } from '../context'
 import { type CollectionViewProps } from '../types'
 import { CollectionViewBoard } from './collection-view-board'
 import { CollectionViewGallery } from './collection-view-gallery'
@@ -8,18 +9,31 @@ import { CollectionViewTable } from './collection-view-table'
 
 export function CollectionViewImpl(props: CollectionViewProps) {
   const { collectionView } = props
+  const { components } = useNotionContext()
 
   switch (collectionView.type) {
     case 'table':
+      if (components.CollectionViewTable) {
+        return <components.CollectionViewTable {...props} />
+      }
       return <CollectionViewTable {...props} />
 
     case 'gallery':
+      if (components.CollectionViewGallery) {
+        return <components.CollectionViewGallery {...props} />
+      }
       return <CollectionViewGallery {...props} />
 
     case 'list':
+      if (components.CollectionViewList) {
+        return <components.CollectionViewList {...props} />
+      }
       return <CollectionViewList {...props} />
 
     case 'board':
+      if (components.CollectionViewBoard) {
+        return <components.CollectionViewBoard {...props} />
+      }
       return <CollectionViewBoard {...props} />
 
     default:

packages/react-notion-x/src/types.ts

@@ -34,6 +34,12 @@ export interface NotionComponents {
   Collection: any
   Property?: any
 
+  // collection view components
+  CollectionViewGallery?: any
+  CollectionViewTable?: any
+  CollectionViewList?: any
+  CollectionViewBoard?: any
+
   propertyTextValue: ComponentOverrideFn
   propertySelectValue: ComponentOverrideFn
   propertyRelationValue: ComponentOverrideFn