React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

CountdownTimer

Displays a countdown timer to create urgency for time-sensitive offers and promotions

Interactive Playground

Customize the countdown timer properties and see the changes in real-time

Common Use Cases

Different countdown timer configurations for various scenarios

Flash Sale (1 Hour)

Limited Time Offer (6 Hours)

Daily Deal (24 Hours)

Event Countdown (3 Days)

Variants

Different timer display options

With Title

Without Title

Disabled State

(Timer is disabled - nothing appears above)

API Reference

Props

countdownTimer

CountdownTimerConfig (optional) - Configuration object for the countdown timer

CountdownTimerConfig properties:

  • enabled: boolean - Whether the timer is active and visible
  • title: string (optional) - Title displayed above the timer
  • timer_option: 'absolute' | 'relative' - Timer type (currently only 'absolute' is implemented)
  • end_date_time: string - ISO 8601 date string for when the timer should end
className

string (optional) - Additional CSS classes

Usage Notes

  • •The timer automatically updates every second
  • •When the countdown reaches zero, the timer stops and hides itself
  • •Days are only shown when the countdown is more than 24 hours
  • •Hours are only shown when the countdown is more than 1 hour
  • •Minutes and seconds are always displayed
  • •If enabled is false, the component renders nothing