delay-route-leave v1.0.1

delay-route-leave

delay-route-leave 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-route-leave

Usage

import * as React from "react";
import useDelayRouteLeave from "delay-route-leave";

const Component = () => {
  // Delay the route by 800 ms
  const leaving = useDelayRouteLeave(800, () => {
    // Optional callback function
  });

  return (
    <div className={`container${leaving ? " leave-anim" : ""}`}>
      <h1>Hello world</h1>
      <p>Quick brown fox jumps over the lazy dog.</p>
    </div>
  );
};

export default Component;