react-timer-counter-hook v1.0.0

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