Merge pull request #30 from cball/cb-custom-components

Adds ability to override components from consuming app
splitbee · Sep 29, 2020 · ff67c78 · ff67c78
2 parents 59f5f49 + a8d7b3a
commit ff67c78
Show file tree

Hide file tree

Showing 7 changed files with 500 additions and 369 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,7 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.3.5",
+    "next": "^9.5.3",
     "node-fetch": "^2.6.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

diff --git a/example/pages/[pageId].tsx b/example/pages/[pageId].tsx
@@ -1,5 +1,7 @@
+import React from "react";
 import { NotionRenderer, BlockMapType } from "react-notion";
 import Head from "next/head";
+import Link from "next/link";
 import fetch from "node-fetch";
 
 export async function getServerSideProps(context) {
@@ -39,7 +41,15 @@ const NotionPage = ({ blockMap }) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <NotionRenderer blockMap={blockMap} fullPage />
+      <NotionRenderer
+        blockMap={blockMap}
+        fullPage
+        customBlockComponents={{
+          page: ({ blockValue, renderComponent }) => (
+            <Link href={`/${blockValue.id}`}>{renderComponent()}</Link>
+          )
+        }}
+      />
       <style jsx global>{`
         div :global(.notion-code) {
           box-sizing: border-box;

diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -1,5 +1,6 @@
 import { NotionRenderer, BlockMapType } from "react-notion";
 import Head from "next/head";
+import Link from "next/link";
 import fetch from "node-fetch";
 
 export async function getStaticProps() {
@@ -26,7 +27,14 @@ const Home = ({ blockMap }) => (
     <Head>
       <title>react-notion example</title>
     </Head>
-    <NotionRenderer blockMap={blockMap} />
+    <NotionRenderer
+      blockMap={blockMap}
+      customBlockComponents={{
+        page: ({ blockValue, renderComponent }) => (
+          <Link href={`/${blockValue.id}`}>{renderComponent()}</Link>
+        )
+      }}
+    />
   </div>
 );
 

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -3310,7 +3310,7 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-next@^9.3.5:
+next@^9.5.3:
   version "9.5.3"
   resolved "https://registry.yarnpkg.com/next/-/next-9.5.3.tgz#7af5270631f98d330a7f75a6e8e1ac202aa155e2"
   integrity sha512-DGrpTNGV2RNMwLaSzpgbkbaUuVk30X71/roXHS10isSXo2Gm+qWcjonDyOxf1KmOvHZRHA/Fa+LaAR7ysdYS3A==