Skip to main content

Countdown Timer

This is the <CountdownTimer /> component


Examples

<CountdownTimer endDate="2022-12-01" />
<CountdownTimer inline endDate="2022-12-01" />
<CountdownTimer backgroundColor="$primary400" color="$white" endDate="2022-12-01" />
<CountdownTimer suffix=" Until Drop!" endDate="2022-12-01" />
<CountdownTimer prefix="Drops In" endDate="2022-12-01" />
<CountdownTimer textAppearance="sm" endDate="2022-12-01" />

Note This component will not appear until 4 days to the endDate

<CountdownTimer maxDaysToShow={4} endDate="2022-12-01" />

Basic Usage

import CountdownTimer from '@candy/kitkat/countdown-timer'

export const MyComponent = () => {
return <CountdownTimer endDate="2022-12-01 />
}

Props

  • backgruondColor
  • backgruondColor
  • endDate*
  • inline: boolean
  • maxDaysToShow: Number
  • prefix?: string
  • suffice?: string
  • textAppearance?: (Text variants)