[v2] How to hook into React Router events?

[nvquanghuy]

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?

[slorber]

Hi,

We have an undocumented "onRouteUpdate" event, but it fires too early (before the content of the new page is actually rendered)

I need to fix it, but until then you can use it, but you'll still need the setTimeout due to the bug unfortunately 😓
This is because we navigate to the new URL before rendering it, the rendering of the new page happens a little bit afterward (once. bundles are loaded).

Let's track it here: #3399

[daniel-farina]

Hello @slorber

I read the new docs on the client lifecycle, but it's not now clear how to properly create hook with router.
Would it be possible to get a simple plugin example of a hook writing to the console the path everytime it changes?

Tysm for all the contributions!

[slorber]

@daniel-farina it's your luckly day because we have exactly that here: https://github.com/facebook/docusaurus/blob/main/website/_dogfooding/clientModuleExample.ts

Open any of our deploy preview (disabled in prod) and see it in action in your console: https://deploy-preview-8137--docusaurus-2.netlify.app/