This module offers a Timer component.
npm install @laverve/timerThis package provides a component to display timer using React framework.
``
npm i @laverve/timer
`
import { Timer, useTimer } from "@laverve/timer"
// ....
const { seconds, minutes, timeLeftPercents } = useTimer( {type: "countup", isCounting: true});
`
`
import { Timer, useTimer } from "@laverve/timer"
// ....
const { seconds, minutes, timeLeftPercents } = useTimer( {type: "countdown", isCounting: true});
`
.You can use this property to slightly modify the look and feel of a timer component. The provided class names will be applied to the root container of a component.
$3
#### viewStyle.defaultColor
Default value:
rgba(17, 17, 17, 0.20).This property defines color of a timer's circle when timer counts up.
#### viewStyle.colorFrom
Default value:
#67B747.This property defines a starting color of a timer's circle when timer counts down.
#### viewStyle.colorTo
Default value:
#C54555.This property defines an ending color of a timer's circle when timer counts down.
$3
Required.Type:
numberUse this property to display seconds.
$3
Required.Type:
Use this property to display minutes.
$3
Default value: .Type:
numberUse this property to display how much time does user still have to complete the game. Keep it equl to
if timer works in times up mode.
useTimer hook
Options
$3
Default value: 0.Type:
numberUse this property to define how much time shall be measured.
$3
Default value: .Values:
countup or countdown.Use this property to define timer's behavior.
$3
Default value: false.Type:
booleanUse this property to control when to start timer.
$3
Default value: .Type:
FunctionUse this property to react when time is up.
Returns
The hook return an object that you can use to determine timer's state and pass to Timer component.
{
timeLeft: , // eq to 0 when time is up or timer is in countup mode
timeLeftPercents: , // in a range from 0 to 100, eq to 0 when time is up or timer is in countup mode
minutes: , // amount of minutes left or spent, depends on a type of a timer
seconds: , // amount of seconds left or spent, depends on a type of a timer
startTime: , // indicates a time when timer was started
endTime: , // indicates a time when timer was stopped
isCounting: // shows if the timer is running right now
reset: () => void // resets timer to initial state
}
@laverve/timer is licensed under the MIT license. MIT