React-Spinner-Timer

The React Spinner Timer for React.

Circular countdown timer with progressive animation.

Component

Installation and usage

To install React Spinner Timer you can run:

yarn add react-spinner-timer

or

npm install react-spinner-timer

To use:

import React from "react";
import ReactSpinnerTimer from "react-spinner-timer";

function App() {
  const handleChange = (lap) => {
    if (lap.isFinish)
      console.log("Finished!!");
    else
      console.log("Running!! Lap:", lap.actualLap);
  };
  return (
    <ReactSpinnerTimer
      timeInSeconds={60}
      totalLaps={60}
      isRefresh={false}
      onLapInteraction={handleChange}
      isPause={false}
    />
  );
}
export default App;

See another example at Code Sandbox

Props

Common props you need to specify:

| Prop | Type | Description | |-------------------|----------|---------------------------------------| | timeInSeconds | Number | Component lap time | | totalLaps | Number | Number of laps | | onLapInteraction | Function | When you complete a lap, what to do? | | isRefresh | Boolean | Refresh the lap (Optional) | | isPause | Boolean | Default (true) pause time count |

Function callback of OnLapInteraction

| Prop | Type | Description | |-------------------|----------|---------------------------------------| | actualLap | Number | Lap actual | | totalLaps | Number | Number of total laps | | isFinish | Boolean | Interactions is finished | | timeInSeconds | Number | Time of lap |

Thanks

Thanks for downloading, use wisely!