Skip to content

How to custom CollectionCard #621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kryushiki opened this issue Apr 9, 2025 · 0 comments
Open

How to custom CollectionCard #621

kryushiki opened this issue Apr 9, 2025 · 0 comments

Comments

@kryushiki
Copy link

kryushiki commented Apr 9, 2025

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?

@kryushiki kryushiki changed the title CollectionCardをoverrideまたはカスタムする方法が知りたい How to pass custom CollectionCard to CollectionViewGallery Apr 9, 2025
@kryushiki kryushiki changed the title How to pass custom CollectionCard to CollectionViewGallery How custom CollectionCard Apr 10, 2025
@kryushiki kryushiki changed the title How custom CollectionCard How to custom CollectionCard Apr 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant