React and Markdown: Better to intercept or replace anchor elements in markdown?

By Jawad Khalil

We're setting up an Archery Wiki on our site and using Firebase as our back end. Adding wikis is simple enough, as we can use a simple markdown editor, and displaying them is easy enough using the marvellous react-markdown package. However, navigation triggered a whole page refresh, which was less than ideal.

I thought there must be a way of intercepting anchor element clicks in React, but after searching for a while, I realised that intercepting clicks on all links was less than ideal anyway. Wouldn't it be better to listen to internal links, replace them with pseudo anchor elements, and trigger React's navigation instead?

So that's what I did!

This is the relevant component in context:

<ReactMarkdown
  components={{
    a: (props) => {
      return props.href.startsWith(
        "https://witchfordarchers.club/wiki/",
      ) ? (
        <span
          style={{
            cursor: "pointer",
            textDecoration: "underline",
          }}
          title={props.href.replace(
            "https://witchfordarchers.club/wiki/",
            "",
          )}
          onClick={handleNavigation.bind(
            this,
            props.href.replace("https://witchfordarchers.club/wiki/", ""),
          )}
        >
          {props.children}
        </span>
      ) : (
        <a href={props.href}>{props.children}</a> // All other links
      );
    },
  }}
>
  {wiki.content}
</ReactMarkdown>

Of course, it requires a handleNavigation handler being passed down, but that's dead simple to add to the calling page.

This is an example of the code working, and this is the implementation on Witchford Archers.

HEDGE CLOCK

Ages ago I wrote a simple clock, and recently I came across some lovely images by TransientCode, the combination of these factors led me to create a simple clock using the images; this is the result:

If you follow the source then you might notice that it makes noises each time the numerals change - each numeral has it's own sound - but this can become annoying! It won't make any sound until you click on the page though.