Open
Description
I'm trying to customize the card layout shown in the CollectionViewGallery, but I'm having trouble getting my custom component to apply.
notionPage.tsx
const components = React.useMemo<Partial<NotionComponents>>(
() => ({
Collection: CustomCollection, // OK
CollectionCard: CustomCollectionCard, // NG
}),
[]
)
CollectionCard is nested inside Collection → CollectionView → CollectionViewGallery → CollectionCard.
So, to customize the CollectionCard, do I need to patch all of the following components: Collection, CollectionView, CollectionViewGallery, and CollectionCard?
If that's the case, I tried the following setup:
CustomCollection.tsx
import { Collection } from 'react-notion-x/build/third-party/collection'
import CustomCollectionView from './CustomCollectionView'
function CustomCollection(props) {
console.log('CustomCollection', props)
return (
<Collection
{...props}
components={{
CollectionView: CustomCollectionView
}}
/>
)
}
export default CustomCollection
However, my CustomCollectionView does not seem to be reflected or used.
Could you please let me know how I should properly pass down the custom components so that my CustomCollectionCard is actually used in the gallery view?
Metadata
Metadata
Assignees
Labels
No labels