Wraps the React Router Link component and creates a delay after the link is clicked.

DelayLink.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

/**
 * Wraps the React Router Link component and creates a delay after the link is clicked.
 */
export default class DelayLink extends React.Component {
  static propTypes = {
    /**
     * Milliseconds to wait before registering the click.
     */
    delay:        PropTypes.number,
    /**
     * Called after the link is clicked and before the delay timer starts.
     */
    onDelayStart: PropTypes.func,
    /**
     * Called after the delay timer ends.
     */
    onDelayEnd:   PropTypes.func
  };

  static defaultProps = {
    delay:        0,
    onDelayStart: () => {},
    onDelayEnd:   () => {}
  };

  static contextTypes = Link.contextTypes;

  constructor(props) {
    super(props);
    this.timeout = null;
  }

  componentWillUnmount() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  }

  /**
   * Called when the link is clicked
   *
   * @param {Event} e
   */
  handleClick = (e) => {
    const { replace, to, delay, onDelayStart, onDelayEnd } = this.props;
    const { history } = this.context.router;

    onDelayStart(e, to);
    if (e.defaultPrevented) {
      return;
    }
    e.preventDefault();

    this.timeout = setTimeout(() => {
      if (replace) {
        history.replace(to);
      } else {
        history.push(to);
      }
      onDelayEnd(e, to);
    }, delay);
  };

  render() {
    const props = Object.assign({}, this.props);
    delete props.delay;
    delete props.onDelayStart;
    delete props.onDelayEnd;

    return (
      <Link {...props} onClick={this.handleClick} />
    );
  }
}

Hi @headzoo
Thanks for this component.

I've used your component to add a class into my root element, so fadeout effect is now possible.

<DelayLink 
    to="/next_page"
    delay={800}
    onDelayStart={() => { /* fadeout class */ }}
    onDelayEnd={() => { /* fadein class */ }} />

A little bit of css and transition effect is ready.

Have a good day

updated with hook

import React, { useEffect, useCallback, useState } from "react";
import PropTypes from "prop-types";
import { Link, useHistory } from "react-router-dom";

const DelayLink = (props) => {
	let [isTimeOut, setIsTimeout] = useState(false);
	let history = useHistory();
	const { replace, to, delay, onDelayStart, onDelayEnd, children } = props;

	useEffect(() => {
		if (isTimeOut) {
			let delayTimeOut = setTimeout(() => {
				if (replace) {
					history.replace(to);
				} else {
					history.push(to);
				}
				onDelayEnd();
			}, delay);

			return () => clearTimeout(delayTimeOut);
		}
	}, [delay, history, onDelayEnd, replace, to, isTimeOut]);
	const handleClick = useCallback(
		(e) => {
			onDelayStart(e, to);
			if (e.defaultPrevented) {
				return;
			}
			e.preventDefault();
			setIsTimeout(true);
		},
		[to, onDelayStart]
	);

	return (
		<Link
			to={props.to}
			delay={props.delay}
			onClick={handleClick}
			replace={props.replace}>
			{children}
		</Link>
	);
};

DelayLink.prototype = {
	to: PropTypes.string.isRequired,
	delay: PropTypes.number,
	onDelayStart: PropTypes.func,
	onDelayEnd: PropTypes.func,
	replace: PropTypes.bool
};
DelayLink.defaultProps = {
	delay: 0,
	onDelayStart: () => {},
	onDelayEnd: () => {}
};

export default DelayLink;

pig800509 your code is a good idea, I like the idea of having a functional component version, but it seems to be missing some things, so I went ahead and corrected what was missing(eslint caught some stuff) and once I got it functional I get this error. Just wanted to mention it if anyone else comes across it. The class component version worked like a charm though!

@ClydeFrog04, sorry, I have fixed that issue, try again.

thanks

Another thing this component is missing is the ability to carry over props such as className or onLeave etc. Is there a clean way to do this whilst still maintaining typescript support for these props?