@marchsabino/react-timer v0.1.0

React Timer

A simple Timer component for React ⏱

Features

1. Count either up or down
2. Pause the Timer at any moment
3. Easily format the time remaining
4. Perform tasks each second, or on completion

Installation

npm i @marchsabino/react-timer

or

yarn add @marchsabino/react-timer

Basic Usage

The most basic usage, counting to 10.

import React from "react";
import Timer from "@marchsabino/react-timer";

const MySampleComponent = () => {
  return (
    <div>
      <h1>Let's count to 10!</h1>
      <Timer seconds={10} />
    </div>
  );
};

export default MySampleComponent;

Component props

interface ITimer {
  /** Number of seconds for this Timer to count for */
  seconds: number;
  /** Determines the running state of this Timer. */
  paused?: boolean;
  /** Determines if this Timer should count down or should count up */
  countDown?: boolean;
  /** The display format for this Timer */
  format?: string;
  /** An action to perform each time this Timer ticks (every 1 second) */
  onTick?: Function;
  /** An action to perform once this Timer has run for x seconds */
  onComplete?: Function;
}

More Usages

// Count down from 10
<Timer seconds={10} countDown={true} />
// Count down from 65 seconds with formatting (01:05)
<Timer seconds={65} countDown={true} format={"mm:ss"} />
// Print "Done" after 10 seconds
<Timer seconds={10} onComplete={() => console.log("Done")} />
// Print "Something" every second until completion.
<Timer seconds={3} onTick={() => console.log("Something")} />

Advanced Usages

Pause and Play the Timer

import React, { useState } from "react";

const MySampleComponent = () => {
  const [paused, setPaused] = useState(true);

  return (
    <div>
      <Timer seconds={10} paused={paused} />
      <button onClick={() => setPaused(!paused)}>
        {paused ? "Play" : "Pause"}
      </button>
    </div>
  );
};

export default MySampleComponent;