Passing props to remarkReactComponents

[sponge]

I've specified a custom handler for "input" elements, but what would the best way to set extra props on that item? I am using https://github.com/landakram/remark-task-list and trying to setup an onChange handler on checkboxes in order to modify them.

[soederpop]

Along similar lines, Is there a way to pass the original node to my custom component? The sanitization that happens, or the conversion to the hast or hyperscript (I'm not sure exactly) strips a lot of information, so I can't distinguish between inlineCode and code since the only information I have about them is children -- disabling sanitization does preserve some information but causes warnings on other components.

I haven't begun to try and override other elements yet but I can imagine losing this information will make them harder as well.

appreciate any advice

[davidtheclark]

I've specified a custom handler for "input" elements, but what would the best way to set extra props on that item?

There is not currently a way to do this. It will require an API change in order to give you more control over the rendering than just providing a custom component. It's a good idea!

Along similar lines, Is there a way to pass the original node to my custom component?

I think this could be part of the same feature. Maybe the value of a remarkReactComponents property could be a function that accepts the current node and returns both the component to use and the props to pass it.

[angeloashmore]

I'm not sure if this answers your question, but I used this pattern on a project recently:

<div>
  {renderRemark(markdownString, {
    remarkReactComponents: {
      h1: MarkdownH1,
      h2: props => <MarkdownH2 myProp={myValue} {...props} />,
      p: MarkdownP,
      li: MarkdownLI,
    },
  })}
</div>

For h2 components, myProp will be passed to the component while keeping everything else intact (namely children).

Edit: Ha, I just saw how old this issue is. Hope it helps someone. 😅

[wooorm]

Something like what @angeloashmore is suggesting should work!