Skip to content

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

Open
@k5o

Description

@k5o

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions