Install

npm install react-timer-counter-hook

Example

Import

import { useClock, useTimer } from 'react-timer-counter-hook'

Usage

import React, { useEffect, useState } from 'react'
import { ScrollView, Text, View, Button, TextStyle } from 'react-native'
import { useClock, useTimer } from 'react-timer-counter-hook'

const TIME: TextStyle = {
  fontSize: 20,
}

const Example = () => {
   const [fire, setFire] = useState(null)
  const { currentTime, currentDay, hour, minute, seconds, term } = useClock()

  const Oclock = () => (
    <View style={{ alignItems: 'center', marginTop: 100 }}>
      <Text style={[TIME, { color: 'red' }]}>{currentTime}</Text>
      <Text style={TIME}>{currentDay}</Text>
      <Text style={TIME}>{hour}</Text>
      <Text style={TIME}>{minute}</Text>
      <Text style={[TIME, { color: 'red' }]}>{seconds}</Text>
      <Text style={TIME}>{term}</Text>
    </View>
  )

  const { counter, start, pause, reset, isRunning } = useTimer({
    startFrom: 5,
    type: false,
    isStopWatch: true,
    EndcallBack: () => setFire('boom'),
  })

  const Timer = () => (
    <View>
      <Text style={{ textAlign: 'center', fontSize: 18, color: 'red' }}>
        Seconds: {counter}
      </Text>
      <Button
        onPress={() => {
          isRunning ? pause() : start()
        }}
        title={isRunning ? 'Pause' : 'Start'}
      />
      <Button onPress={() => reset()} title={'reset'} />
      {fire && (
        <Text style={{ textAlign: 'center', fontSize: 20, color: 'red' }}>
          Callback Fired 💥💥💥💥
        </Text>
      )}
    </View>
  )

  return (
    <ScrollView contentContainerStyle={{ marginTop: 100 }}>
      <Text style={{ fontSize: 25, textAlign: 'center' }}>Timer</Text>
      <Timer />
      <Oclock />
    </ScrollView>
  )
};

The useClock hooks has the following values:

Name	Type	value
currentTime	string	10:23:18 pm or am
currentDay	string	Weekdays
hour	string	hour
minute	string	min
seconds	string	seconds
term	string	term "AM" or "PM"

The useTimer hooks has the following parameters:

Name	Explanation	Type	value	Required	Default Value
startFrom	count down start from this value	number	number	❌	0
type	if false countdown	boolean	false	❌	true
isStopWatch	if true count will fire EndcallBack when count down reach 0	true	false	❌	false
EndcallBack	callback function run whte count down reach 0	()=> void	()=>{}	❌	()=>{}

The useClock hooks has the following values:

Name	Type	value
counter	string	1++ or 1--
start	()=> void	()=> void
pause	()=> void	()=> void
reset	()=> void	()=> void
isRunning	boolean	boolean

---

License

MIT