react-notion-x
react-notion-x copied to clipboard
NotionX
NotionRenderer not rendering components properly
Hello there,
I'm trying to implement Search using react-notion-x as shown in the Next.js example. I've copied most of the code over and get no errors, when I try to open the Search Modal, I get the following warning:
Warning: using empty component "Modal" (you should override this in NotionRenderer.components)
Below is the code for my NotionPage.tsx, I'm importing Modal using dynamic() and adding it to the components of the NotionRenderer. I get the same warning if I directly import the Modal without using dynamic(). When I click on the Search component, it executes the search function with an empty string and returns some results but the Modal never shows up!
Does anyone know why that is and how I can fix it?
Is there a way to style and format the <Search /> component with my own HTML, I'd like to use a Chakra Ui component for it?
Thank you very much!
Notion Test Page ID
rootNotionPageId = 'a1c4c4eb2a8842e9a53a8d642b5da034'
NotionPage.tsx
import { useMemo } from 'react'
import Head from 'next/head'
import type { ExtendedRecordMap } from 'notion-types'
import { getPageTitle } from 'notion-utils'
import { NotionRenderer } from 'react-notion-x'
import Link from 'next/link'
import Image from 'next/image'
import dynamic from 'next/dynamic'
import { searchNotion } from '@/helper/notion/search-notion'
const Equation = dynamic(() =>
import('react-notion-x/build/third-party/equation').then((m) => m.Equation),
)
const Pdf = dynamic(
() => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
{
ssr: false,
},
)
const Modal = dynamic(
() => import('react-notion-x/build/third-party/modal').then((m) => m.Modal),
{
ssr: false,
},
)
export const NotionPage = ({
recordMap,
rootPageId,
rootDomain,
}: {
recordMap?: ExtendedRecordMap
rootPageId?: string
rootDomain?: string
}) => {
const components = useMemo(
() => ({
Equation,
Pdf,
Modal: Modal,
nextLink: Link,
nextImage: Image,
// this will change all the urls to use the /docs prefix
// TODO: add language support
PageLink: ({ className, href, children }: { className: string, href: string, children: React.ReactElement }) => {
return (
<Link className={className} href={`/docs${href}`}>{children}</Link>
)
},
}),
[],
)
if (!recordMap) return null
const title = getPageTitle(recordMap)
return (
<>
<Head>
<meta name="description" content="Feddersen"/>
<title>{title}</title>
</Head>
<NotionRenderer
recordMap={recordMap}
fullPage={false}
darkMode={false}
rootPageId={rootPageId}
rootDomain={rootDomain}
searchNotion={searchNotion}
components={components}
/>
</>
)
}
