This library is Countdown Timer

Component by MUI, @mui/material

countdown-timer-mui

Support ReactJS, NextJS

Getting started

npm i countdown-timer-mui

or

yarn add countdown-timer-mui

How to use

ReactJS

import { CountDownTimer } from "countdown-timer-mui"

NextJS

import dynamic from "next/dynamic";
const CountDownTimer = dynamic(
  () => import("countdown-timer-mui").then((mod) => mod.CountDownTimer),
  { ssr: false }
);

Example

<CountDownTimer
    display={true}
    containerStyle={{}}
    targetDate={"2023-12-01T00:00:00.000Z"}
    daysType={"d"}
    hoursType={""}
    minutesType={""}
    secondsType={""}
    timerContainerStyles={{}}
    timerFontStyles={{}}
    formatBetween={":"}
    formatBetweenStyle={{}}
/>

Attribute

| Attribute | type | options | description | | --------------------------------------------- | ------ | --------------------------------- | ----------------------------------- | | display | bool | | | | containerStyle | object | sx props | | | targetDate | string | date format | date time format | | daysType, hoursType, minutesType, secondsType | string | ex. "days", "hr", "minutes", "ss" | text after timer | | timerContainerStyles | object | sx props | | | timerFontStyles | object | sx props | | | formatBetween | string | ex. ":", "-", "/" | text display between each container | | formatBetweenStyle | object | sx props | |