Customizing the react markdown footnote component

[callumhening]

Hi all,

I'm currently working with React Markdown, using the remark gfm plugin so I can handle footnotes and other things. I'm familiar with the ability to add a custom components prop, the React Markdown README gives a nice example of how to do this with a custom code block component:

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'

// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:

~~~js
console.log('It works!')
~~~
`

createRoot(document.body).render(
  <Markdown
    children={markdown}
    components={{
      code(props) {
        const {children, className, node, ...rest} = props
        const match = /language-(\w+)/.exec(className || '')
        return match ? (
          <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={dark}
          />
        ) : (
          <code {...rest} className={className}>
            {children}
          </code>
        )
      }
    }}
  />
)

I have been trying to figure out how to do something analogous with footnotes, but I can't find any documentation on what that component ought to be named, or if it exists at all. Also from the React Markdown README is mention of remark-gfm supporting certain custom components, but there's no mention of the footnote component there (https://github.com/remarkjs/react-markdown#appendix-b-components). Anyway, if someone could point me to some documentation I've been missing, advise if I'm on the right track, or otherwise let me know if this is possible, I'd really appreciate it!

[wooorm]

Hey!

When using remark-gfm, footnotes should work.

There are no particular components things. There are HTML tags that you can overwrite. You can overwrite each HTML element with a component.

Use your developer tools to inspect which elements are currently generated, and which classes. Then you can swap those out for components. You’ll see there’s a sup and a particular a with a data field for example.

[callumhening]

Ah thank you!