Share it!

When using React Router, one of the most commonly used components to navigate around an SPA (Single-Page Application) is the <Link>.

In most applications, this component is the primary way to allow users to navigate around a React Application. The <Link> component renders an anchor tag with the target URL set in its href attribute.

When clicking on this component from React Router, the browser changes the current route to the target URL, and React re-renders the page using the new route. This works by manipulating the browser’s HTML5 history API.

This API includes a way to add entries to the browser history, to visibly change the URL in the browser location bar (without triggering a page refresh, making it ideal to work on single-page applications using React).

All this happens instantaneously. When a user clicks on the link, the Route is updated and the page gets refreshed. However, this is not ideal in some cases.

For instance, if you want to show a click effect (e.g. a ripple effect on the clicked element), this gets a bit complex because as soon the link is clicked, the page refreshes, hiding the effect. Or, perhaps, it’s necessary to perform an action before updating the current page route.

Delaying React Router Links

With this in mind, I developed a simple component named <DelayLink>. This component works in a similar way to React Router’s <Link> but adding a configurable delay before jumping to the target route. This makes it easier to add click effects that require a brief delay to display.

The component also has a property for adding a JavaScript function, that runs right after the user clicks on the link, before setting up the delay. This function is useful for a variety of things, such as updating state, setting up a component or even invoking an asynchronous API.

The component relies on the React Router’s withRouter() HOC to provide access to the history API and enable browser history manipulation.

In order to prevent runtime errors due to routing components duplication, the react-router-dom component is not included as a dependency so it must be manually added to the project.

Using the component

As with any React component, the component must be added to the project before using it. So the first step is to install it using the following command:

npm install delay-link-component

After this, you can create an instance of this component by importing the component and then specifying the link’s properties. In the example below, the click will be triggered after 2 seconds, pushing a new route (/ = homepage) to the history object and invoking the action() function right after the component is clicked.

import DelayLink from 'react-delay-link';

function action() {
console.log('clickAction invoked');
}

<DelayLinkdelay={2000} to="/" clickAction={action} replace={false}>
<p>Hello, I'm a clickable link.</p>
</DelayLink>

You can get the component on NPM or Github. Be sure to let me know of any errors and any possible improvements.


Share it!