yarn add react-native-timer-hooks
or
npm install react-native-timer-hooks
import { useClock } from 'react-native-timer-hooks';
import React from "react";
import { StyleSheet, View, Text, Button } from 'react-native';
import { useClock } from 'react-native-timer-hooks';
const Example = () => {
const [counter, start, pause, reset, isRunning] = useClock({
from: 0,
to: 60,
stopOnFinish: true,
});
return (
<View style={styles.container}>
<Text>Seconds: {counter}</Text>
<Button
onPress={() => {
isRunning ? pause() : start();
}}
title={isRunning ? 'Pause' : 'Start'}
/>
<Button onPress={() => reset()} title={'reset'} />
</View>
);
};
The useClock
hooks has the following parameters:
Name | Type | Explanation | Required | Default Value |
---|---|---|---|---|
from |
number |
The initial value of counter. | ✅ | undefined |
to |
number |
When the timer should stop. | ❌ | undefined |
ms |
number |
The number of millisecond between.
1000 ms for 1 second.
|
❌ | 1000 |
down |
boolean |
Counter value should decrease or increase. | ❌ | false |
The useClock
hooks has the following returns values:
Name | Type | Explanation | Parameters |
---|---|---|---|
counter |
number |
The initial value of counter. | |
start |
function |
Start the counter. | |
pause |
function |
Pause the counter. | |
reset |
function |
Reset the counter. There is an optional parameter to set the from value |
from :number = the restart value of the counter. |
isRunning |
boolean |
Return true if the counter is running, false if not. |
MIT