Have ideas to improve npm?Join in the discussion! »

    react-delay-link
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.6 • Public • Published

    react-delay-link

    A React component to trigger Router links with a delay

    GitHub license GitHub package.json version Scrutinizer build (GitHub/Bitbucket) Scrutinizer Code Quality Snyk Vulnerabilities for GitHub Repo GitHub issues

    This component works in a similar way to React Router's 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 custom JavaScript function, to be executed right after the user clicks on the link, before the link is actually triggered. This component uses React Router's withRouter Higher-order Component (HOC) to get access to and manipulate the history object.

    This function may be used for a variety of things, such as updating state, setting up a component or even invoking an asynchronous API.

    Install

    Install the module with npm:

    npm install --save react-delay-link
    

    Dependencies

    This component relies on the react-router-dom component. Please add it to your project by running:

    npm install --save react-router-dom
    

    Alternatively, you can add the package to your package.json file and run

      npm install
    

    Usage

    You can create an instance of this component by importing the component and then specifying the link's properties.

    In this case, the click will be triggered after 2 seconds, pushing a new route (homepage) to the history object and invoking the action() function.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import DelayLink from 'react-delay-link';
    
    function action() {
      console.log('clickAction invoked');
    }
    
    ReactDOM.render(
       <DelayLink delay={2000} to="/" clickAction={action} replace={false}>
        <p>Hello, I'm a clickable link.</p>
     </DelayLink>, document.getElementById('roots'),
    );
    

    Properties

    delay Milliseconds to wait before triggering the click event.

    replace Whether to replace the current URL with the link's or push a new one.

    to The target URL

    clickAction An optional function to invoke before setting up the timeout

    Share it!

    Twitter

    Install

    npm i react-delay-link

    DownloadsWeekly Downloads

    213

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    9.58 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar