react-countdown-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    react-countdown-hook

    Dead simple yet powerful countdown hook for React. Powered by requestAnimationFrame.

    Installation

    Using npm:

    $ npm install --save react-countdown-hook

    Using yarn:

    $ yarn add react-countdown-hook

    Quick Start

    import React from 'react';
    import useCountDown from 'react-countdown-hook';
    
    const initialTime = 60 * 1000; // initial time in milliseconds, defaults to 60000
    const interval = 1000; // interval to change remaining time amount, defaults to 1000
    
    const render = () => {
      const [timeLeft, { start, pause, resume, reset }] = useCountDown(initialTime, interval);
      
      // start the timer during the first render
      React.useEffect(() => {
        start();
      }, []);
      
      const restart = React.useCallback(() => {
        // you can start existing timer with an arbitrary value
        // if new value is not passed timer will start with initial value
        const newTime = 42 * 1000;
        start(newTime);
      }, []);
     
      return (
        <>
          <p>Time left: {timeLeft}</p>
     
          <button onClick={restart}>
            Restart counter with 42 seconds
          </button>
        </>
      );
    }

    Note that this is a very basic usage. Check out more usage examples in playground or in the demo project

    Documentation

    [timeLeft, actions] = useCountDown(timeToCount, interval)

    Parameters

    Takes a default countdown time and interval time.

    • timeToCount {Number} Time in milliseconds that countdown should start with. Defaults to 60000
    • interval {Number} Time in milliseconds representing the frequency that countdown should update with. Defaults to 1000

    Return value

    Returns an array with remaining time and actions object.

    • timeLeft {Number} Remaining countdown time in milliseconds
    • actions.start {Function} Start or restart a countdown. Takes time in milliseconds to start with.
    • actions.reset {Function} Resets a countdown to initial state
    • actions.pause {Function} Pauses a countdown
    • actions.resume {Function} Resumes a paused countdown

    Contributing

    Feel free to submit any issues or pull requests.

    License

    MIT

    Install

    npm i react-countdown-hook

    DownloadsWeekly Downloads

    3,490

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    389 kB

    Total Files

    27

    Last publish

    Collaborators

    • alexkhismatulin