CODEWITHSUNDEEP
reactjsgatsbygatsby-plugin
Magnus Kolstad
Magnus Kolstad

Reputation: 547

(Gatsby) Autolink headers, but make the entire heading the anchor

I'm using the gatsby-remark-autolink-headers plug-in to create automatic IDs with anchor tags for my headings.

However, I want my entire heading to be clickable. I don't want a clickable anchor tag before or after it.

Example of what I want:

<h2 id="innsatsen-for-mikroplasten"><a href="#innsatsen-for-mikroplasten">Innsatsen før mikroplasten</a></h2>

Is this achievable with the plug-in?

Upvotes: 1

Views: 440

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

Is this achievable with the plug-in?

Not with the plugin. All the style is GitHub-like, where there's a clickable anchor tag after or before the header so I'm afraid that you should find or a custom implementation using some parser like markdown-to-jsx where you can override any custom HTML representation:

const YourAutolinkTitle= ({ children, ...props }) => (
    <div {...props} onClick={()=>yourFunc(children)}><h1>{children}</h1></div>
);

const yourFunc=(title)=>{
   console.log(title)
}

return(
    <Markdown
        options={{
            overrides: {
                h1: {
                    component: YourAutolinkTitle,
                    props: {
                        className: 'foo',
                    },
                },
            },
        }}
    >
        # Hello world!
    </Markdown>,
);

Where the wrapping div is the element that customizes the URL on click in yourFunc function.

Upvotes: 1

Related Questions