TAG Hooks

A Collection of React Hooks created by @taglivros

useCountdown hook

this hook provides a simple countdown with hours, minutes and seconds

Reference

Methods

| Method name | Arguments | Description | Returns | | --------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | | initializeCountdown() | hours_?: number; minutes_?: number; seconds_?: number endTime?: date | Initializes the countdown with given values. You should use either endDate or hours_ && minutes_ && seconds_ in order to work properly | null | | startCountdown() | - | Starts the countdown | interval (to use with clearInterval()) | | setTimerError() | value: boolean | Changes the error state to given value | null |

Properties

| Property | Description | | -------------- | ------------------------------ | | days | Current Countdown Days left | | hours | Current Countdown Hours left | | minutes | Current Countdown Minutes left | | seconds | Current Countdown Seconds left | | hasError | Indicates state of an error |

Usage

import React, { useEffect } from 'react'
import { useCountdown } from '@taglivros/tag-hooks'

const App = () => {
  const {
    initializeCountdown,
    startCountdown,
    days,
    hours,
    minutes,
    seconds } = useCountdown()
  useEffect(() => {
    initializeCountdown({ endDate: new Date(2022, 5, 5, 5) })// insert here a valid date
    startCountdown()
  })

  return (
    <div>
      <h1>{days}</h1>
      <h1>{hours}</h1>
      <h1>{minutes}</h1>
      <h1>{seconds}</h1>
    </div>
  )
}

🚨 Note: You should wrap the component that uses useCountdown with <CountdownProvider> in an higher level due its useContext use:

import React from 'react'
import { CountdownProvider } from '@taglivros/tag-hooks'

const AppWrapper = () => {
  return (
    <CountdownProvider>
      <App />
    </CountdownProvider>
  )
}