Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
k5o opened this issue Jan 9, 2022 · 0 comments
Open

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

k5o opened this issue Jan 9, 2022 · 0 comments

Comments

@k5o
Copy link

k5o commented Jan 9, 2022

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!

@k5o k5o changed the title How to prepend value to in-page links? How to modify href for in-page links? Jan 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant