delay-react-route-exit

delay-react-route-exit is a hook library for react-router-dom. It's point is to delay a route change, enough so you can apply animations to your components.

Installation

npm i delay-react-route-exit

Usage

import * as React from "react";
import useDelayRouteExit from "delay-react-route-exit";
 
const Component = () => {
  // Delay the route change by 800 ms
  const isExitingRoute = useDelayRouteExit(800, () => {
    // Optional callback function if you don't want to use the return value
    // setState({ ...state, applyRouteExitAnimation: true });
  });
 
  return (
    // Apply the animation when the route starts to change
    // The animation length on the class should be the same length as the milliseconds
    // value placed in the useDelayRouteLeave function
    <div className={`container${isExitingRoute ? " leave-anim" : ""}`}>
      <h1>Hello world</h1>
      <p>Quick brown fox jumps over the lazy dog.</p>
    </div>
  );
};
 
export default Component;