@fastfollowsoftware/tools NPM

@fastfollowsoftware/tools

npm i @fastfollowsoftware.com/tools

Progress Bar

To install just add the RouteChangeComplete and ProgressBar component to the root of your layout.

import {
  ProgressBar,
  RouteChangeComplete,
} from '@fastfollowsoftware/tools/router';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang='en'>
      <body>
        <RouteChangeComplete />
        <ProgressBar />
        {children}
      </body>
    </html>
  );
}

Router

Trigger Router Events

You can trigger route start / complete events.

This is useful in scenarios where you want to trigger progress bar updates for server actions.

import {
  emitActionComplete,
  emitActionStart,
} from '@fastfollowsoftware/tools/router';

export const doAction = async (action: Promise<any>) => {
  emitActionStart();

  const actionResult = await action;

  emitActionComplete();

  return actionResult;
};

Listen to Router Events

You can subscribe to router events using the on method.

Here's an example where we listen to router events and post messages to the parent.

'use client';

import { RouterEvent, on } from '@fastfollowsoftware/tools/router';
import { useEffect } from 'react';

export const MyComponent = () => {
  useEffect(() => {
    const handleRouteChangeStart = () => {
      // handle route change start event
    };

    const handleRouteChangeComplete = () => {
      // handle route change complete event
    };

    on(RouterEvent.RouteChangeStart, handleRouteChangeStart);
    on(RouterEvent.RouteChangeComplete, handleRouteChangeComplete);

    // deregister on unmount
    return () => {
      on(RouterEvent.RouteChangeStart, handleRouteChangeStart);
      on(RouterEvent.RouteChangeComplete, handleRouteChangeComplete);
    };
  }, []);

  return <></>;
};

mailgun.js nextjs13-router-events nodemailer nprogress typescript zustand

5 months ago

8 months ago

1 year ago

1 year ago

1 year ago