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 |