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>
)
}}
/>