markdown-to-jsx
markdown-to-jsx copied to clipboard
Creating a ref when overriding a component
When overriding a component, is there a way to generate a ref
?
Context: I have generated a TOC from the h2
s in my markdown file. Now I would like to create a feature that scrolls to the corresponding heading in the document when the TOC is clicked. I read ref
is the way to go, so now I am trying to add ref
s to all h2
s.
I have tried the below, but ref
is not included int he resulting HTML? ("test" is, so I know the rest is working fine)
<Markdown
children={md}
options={{
forceBlock: true,
overrides: {
h2: {
component: Heading,
}
},
}}
/>
export class Heading extends Component {
render() {
return (
<h2
id={this.props.id}
ref={this.props.id}
test="test"
>
{this.props.children}
</h2>
);
};
}
Any updates on this? Same requirement.