Hook into React Router events in Docusarus?

Question

I'm trying to integrate a simple image zooming library. Basically when clicking on an image, it's expanded so that user can see the image better. Something like this: https://kingdido999.github.io/zooming/

My attempt is to create a plugin that inserts the script to the body.

After some playaround, this is what I ended up with:

/**
 * options.selector: css path to the image tags (e.g '.markdown img')
 */
module.exports = function (context, options) {
  let selector = options.selector;

  let postBodyString = `
<script src="https://unpkg.com/zooming/build/zooming.min.js"></script>
<script>
  // Listen to images after DOM content is fully loaded

  let initImageZoom = function() {
    setTimeout(function() {
      new Zooming({
        customSize: '100%',
        bgOpacity: 0.95,
        scaleBase: 0.8,
      }).listen('${selector}');
    }, 100);
  };

  let monitorURLChange = function() {
    // capture URL change in SPA
    let url = location.href;
    document.body.addEventListener('click', () => {
      requestAnimationFrame( () => {
        if (url !== location.href) {
          initImageZoom();
        }
        url = location.href;
      });
    }, true);
  }

  document.addEventListener('DOMContentLoaded', initImageZoom);
  document.addEventListener('popstate', initImageZoom);
  monitorURLChange();
</script>
`;

  return {
    name: 'docusaurus-image-zoom',
    injectHtmlTags() {
      return {
        headTags: [],
        postBodyTags: [postBodyString],
      };
    },
  };
};

However, this solution feels very hackish since I have to listen to events like popstate or do manual monitoring of browser's URLs.

I imagine there should be a proper way of doing this. What should be the proper way of doing this?

Answer 1

It doesn't seem like you need to listen to the React Router events as this is not really related to routing.

I think the right solution here is to create MDX plugins for the img syntax/tag.