next-router-event

Next-router-event

• Introduction
• Quick start
  • Installation
  • Examples
• Motivation

Introduction

Next-router-event contains the useRouterEvent hook which is basically a tiny abstraction around next router.events. You can use the hook to easily trigger callbacks on a certain type of router event:

• routeChangeStart
• routeChangeComplete
• routeChangeError
• beforeHistoryChange
• hashChangeStart
• hashChangeComplete

It also adds typescript support which gives you a better idea on what args are passed to the callback!

Quick start

Installation

yarn add next-router-event

or

npm i next-router-event

Examples

Example 1: Imagine that we have a modal that needs to close whenever the use navigates to a different page. In example below the isOpen state will be set to false whenever the routeChangeComplete event is triggered.

import { useState } from 'react'
import useRouterEvent from "next-router-event";

const Modal = () => {
    const [isOpen, setIsOpen] = useState(false)

    useRouterEvent('routeChangeComplete', () => setIsOpen(false))

    ...
}

Example 2: The hook can also be handy to trigger certain datalayer updates with regards to google analytics.

import useRouterEvent from "next-router-event";

const handleRouteChange = () => {
  window.dataLayer.push({
    event: "pageview",
    page_location: window.location.href,
  });
};

const usePageView = () => {
  useRouterEvent("routeChangeComplete", handleRouteChange);
};

export default usePageView;

Example 3: If a route load is cancelled (for example, by clicking two links rapidly in succession), we can capture this. By looking at the event type typescript knows what args are given to the callback which we can use to do specific stuff.

import useRouterEvent from "next-router-event";

// wrong
const handleRouteChange1 = (err: string) => {
  if (err.cancelled) {
    console.log(`Route to ${url} was cancelled!`);
  }
};

// correct
const handleRouteChange2 = (err: Error, url: string) => {
  if (err.cancelled) {
    console.log(`Route to ${url} was cancelled!`);
  }
};

const useOnRouterError = () => {
  // typescript will complain
  useRouterEvent("routeChangeError", handleRouteChange1);

  // correct
  useRouterEvent("routeChangeError", handleRouteChange2);
};

export default usePageView;

Motivation

A library for the useRouterEvent hook is probably a little bit redundant but I created it with the idea to try out turborepo. This got me into trying out more things like microbundler for bundling and changesets as the way to manage versioning.

Also special thanks to Lee Robinson who wrote a nice article on this matter

Feel free to copy this setup as a boilerplate for your own ideas!