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!