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!