splitbee / react-notion

A fast React renderer for Notion pages
https://react-notion.com
MIT License
2.85k stars 149 forks source link

How to modify href for in-page links? #98

Open k5o opened 2 years ago

k5o commented 2 years ago

Hi, I have a notion page that I've rendered (easily and beautifully, so well done there), but the links within it point to host/blockValue.id, but I'd love to edit it to something like host/path/blockValue.id. Therefore, something like example.com/support/abcd1234.

The problem I'm encountering is that I don't really know how to use the customDecoratorComponents and customBlockComponents, and I can't find any documentation about it besides the actual src code.

I've tried something like this (added the redundancy just to ensure it could work, I can't articulate the difference between customDecoratorComponents and customBlockComponents)

<NotionRenderer
  blockMap={this.state.data}
  customDecoratorComponents={{
    'a': ({ decoratorValue, children }) => (
      <a href={`/support/${decoratorValue}`}>
        {children}
      </a>
    )
  }}
  customBlockComponents={{
    page: ({ blockValue, renderComponent }) => {
      return (
      <a href={`/support/${blockValue.id}`}>{renderComponent()}</a>
    )}
  }}
/>

It seems that what renderComponent() returns is not respecting the modified href I've added, even if I were to add different attributes.

It does work If I add something like "foo" right after {renderComponent()}, then the renderer creates two links, the normal renderComponent() link and my decorated "foo" link, but that foo link then loses all the styles and I would rather not reinvent the wheel and apply all the styling and extra bells and whistles to my foo link from scratch.

Thank you in advance!