splitbee/react-notion

Open links in new tab

josemussa opened this issue · 3 comments

Notions' default behavior is to use target="_blank" for all a elements. I'm not sure if you want to match functionality 1:1 or allow for customization, but I wanted to highlight this.

While you are right that Notion defaults to target="_blank", I prefer to not replicate this within react-notion, since they are not the best idea accessibility wise. (1, 2).

That said, you can now overwrite default blocks/decorators with the latest 0.9.0 beta.

Here is an example that adds target="_blank" to all a tags:

<NotionRenderer
  blockMap={blockMap}
  customDecoratorComponents={{
    a: ({ decoratorValue, children }) => (
      <a href={decoratorValue} target="_blank">
        {children}
      </a>
    )
  }}
/>

@timolins one thing to note here is that most of the time, you don't want to override all <a> tags but rather differentiate between page links and non-page links.

react-notion-x makes this distinction between components.link and components.pageLink explicit.

Fair point! With "all a tags" I was referring to to all links inside text. Page blocks/links are not overwritten this way, but they can be.

All custom components receive a renderComponent() function, which allows them to render the original component. This makes it easy to add functionality to them, without having to rewrite the whole component (Useful for light-boxes, custom links etc.).

This example shows how to wrap the original page component 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>
    )
  }}
/>