Adds ability to override components from consuming app #30

cball · 2020-09-01T02:33:49Z

I am in the process of exporting our blog from Medium and wanted to make sure elements of our posts can be rendered by this library.

In doing so, we needed to render a tweet, but by adding it to this library it would include extra dependencies that aren't always needed. I'd like to propose adding a customComponents prop that takes mapping of block types and components. The components are called with the blockValue prop.

This way, react-notion can provide a base set of components, but everything can be overridden.

Let me know what you think!

Here's what the code looks like right now in the consuming app (using Next.js):

<NotionRenderer blockMap={blockData} customComponents={{ tweet: NotionBlockTweet }} />

And the component:

import React, { useState, useEffect } from 'react';
import Head from 'next/head';

/**
 * Renders a Tweet Block
 */
export const NotionBlockTweet = ({ blockValue }) => {
  const [url] = blockValue.properties.source[0];
  const [tweetHtml, setTweetHtml] = useState<string>();

  useEffect(() => {
    async function fetchTweet() {
      try {
        const response = await fetch(`/api/tweetHtml?url=${url}`);
        const json = await response.json();
        setTweetHtml(json.html);
      } catch (e) {
        // ignore
      }
    }

    fetchTweet();
  }, []);

  return tweetHtml ? (
    <>
      <Head>
        <script async src="https://platform.twitter.com/widgets.js" />
      </Head>

      <div
        className="notion-tweet"
        dangerouslySetInnerHTML={{
          __html: tweetHtml,
        }}
      />
    </>
  ) : (
    <div>Error loading tweet.</div>
  );
};

cball · 2020-09-01T02:35:12Z

src/components/asset.tsx

-          src={type === "figma" ? value.properties.source[0][0] : display_source}
+          src={
+            type === "figma" ? value.properties.source[0][0] : display_source
+          }


Husky was preventing commits without this prettier change.

cball · 2020-09-01T02:36:00Z

src/types.ts

+  properties: {
+    source: [string[]];
+  };
+}


Adding the tweet interface here avoids the need to add it to the consuming app.

cball · 2020-09-01T02:37:26Z

src/types.ts

+  | CollectionValueType
+  | TweetType;
+
+export type BlockValueTypeKeys = Pick<BlockValueType, "type">["type"];


This creates a type of all the "type" keys in BlockValueType so that we can properly type the customComponent prop.

cball · 2020-09-01T02:41:05Z

Oops. @transitive-bullshit it looks like you've already started a version of this in #13. I'm not sure there's a ton of a benefit in a provider/consumer approach vs what I've suggested here, but I could be missing a use case you have.

timolins · 2020-09-16T07:42:41Z

Thanks for this PR! We plan to move this forward in the coming week, when we have some time to spend on react-notion.

Are there any downsides compared to the Context approach? Would love to hear @transitive-bullshit thoughts on this.

Co-Authored-By: Tobias Lins <[email protected]>

- Useful for wrapping original components (E.g. lightbox or custom links)

- Rename customComponents to customBlockComponents

timolins · 2020-09-29T12:17:06Z

I think we can merge this now. @tobiaslins

It's now possible to overwrite decorator components as well. So full flexibility with this change 🙂

Here is an example that demos both decorator components as well as blocks. It adds target="_blank" to all text links, as well as wrapping page links with a Next.js link.

<NotionRenderer
  blockMap={blockMap}
  fullPage
  hideHeader
  customDecoratorComponents={{
    a: ({ decoratorValue, children }) => (
      <a href={decoratorValue} target="_blank" rel="noopener noreferrer">
        {children}
      </a>
    )
  }}
  customBlockComponents={{
    page: ({ blockValue, renderComponent }) => (
      <Link href={`/${blockValue.id}`}>{renderComponent()}</Link>
    )
  }}
/>

adds ability to override components from consuming app

facbe77

cball commented Sep 1, 2020

View reviewed changes

timolins and others added 5 commits September 21, 2020 17:50

Improve typing & pass children to custom components

677f4bb

Co-Authored-By: Tobias Lins <[email protected]>

Merge remote-tracking branch 'origin/master' into cb-custom-components

6f07014

Expose base component to custom components

8a77d24

- Useful for wrapping original components (E.g. lightbox or custom links)

Use Next.js links for page links

356f17a

Add support for custom decorator components

a8d7b3a

- Rename customComponents to customBlockComponents

tobiaslins merged commit ff67c78 into splitbee:master Sep 29, 2020

tobiaslins mentioned this pull request Sep 29, 2020

Proposal: NotionComponentsProvider #13

Closed

transitive-bullshit mentioned this pull request Oct 7, 2020

Tracking react-notion vs react-notion-x #36

Closed

19 tasks

timolins mentioned this pull request Oct 7, 2020

Split component into <NotionPage/> and <NotionRenderer/> #37

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds ability to override components from consuming app #30

Adds ability to override components from consuming app #30

cball commented Sep 1, 2020

cball Sep 1, 2020

cball Sep 1, 2020

cball Sep 1, 2020

cball commented Sep 1, 2020

timolins commented Sep 16, 2020

timolins commented Sep 29, 2020 •

edited

Loading

Adds ability to override components from consuming app #30

Adds ability to override components from consuming app #30

Conversation

cball commented Sep 1, 2020

cball Sep 1, 2020

Choose a reason for hiding this comment

cball Sep 1, 2020

Choose a reason for hiding this comment

cball Sep 1, 2020

Choose a reason for hiding this comment

cball commented Sep 1, 2020

timolins commented Sep 16, 2020

timolins commented Sep 29, 2020 • edited Loading

timolins commented Sep 29, 2020 •

edited

Loading