Package Exports

react-spinner-timer
react-spinner-timer/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-spinner-timer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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!