react-flip-clock-countdownup

A 3D animated countdown and countup component for React with date picker integration and enhanced styling options.

✨ Features

• 🎯 Countdown & Countup: Both countdown and countup timer modes
• 📅 Date Picker Integration: Select any date to start countup from
• 🎨 Customizable Styling: Full control over colors, sizes, and animations
• 📱 Responsive Design: Works on all screen sizes
• ⚡ TypeScript Support: Full TypeScript definitions included
• 🎭 3D Flip Animation: Smooth flip card animations
• 🔧 Flexible Configuration: Show/hide sections, custom labels, and more

📦 Install

npm install react-flip-clock-countdownup

Or with yarn:

yarn add react-flip-clock-countdownup

🚀 Quick Start

import React from 'react';
import FlipClockCountdown from 'react-flip-clock-countdownup';
import 'react-flip-clock-countdownup/dist/index.css';

function App() {
  return (
    <div>
      {/* Countdown Timer */}
      <FlipClockCountdown
        to={new Date().getTime() + 24 * 3600 * 1000}
        labels={['DAYS', 'HOURS', 'MINUTES', 'SECONDS']}
      />

      {/* Countup Timer */}
      <FlipClockCountdown isCountUp={true} to={0} labels={['DAYS', 'HOURS', 'MINUTES', 'SECONDS']} />
    </div>
  );
}

export default App;

📋 Props

The FlipClockCountdown component accepts all standard div props plus the following:

| Name | Type | Required | Default | Description | | ------------------- | -------------------------------------- | -------- | ----------------------------------------- | --------------------------------------------------- | | to | Date \| string \| number | yes | - | Target date for countdown or start date for countup | | isCountUp | boolean | no | false | Enable countup mode instead of countdown | | labels | [string, string, string, string] | no | ['Days', 'Hours', 'Minutes', 'Seconds'] | Custom labels for each time unit | | showLabels | boolean | no | true | Show/hide the labels | | showSeparators | boolean | no | true | Show/hide separators (colons) between units | | renderMap | [boolean, boolean, boolean, boolean] | no | [true, true, true, true] | Show/hide each time section | | digitBlockStyle | React.CSSProperties | no | - | Styles for digit blocks | | labelStyle | React.CSSProperties | no | - | Styles for labels | | separatorStyle | object | no | - | Styles for separators | | dividerStyle | object | no | - | Styles for dividers | | duration | number | no | 0.7 | Animation duration (0-1) | | hideOnComplete | boolean | no | true | Hide timer when countdown completes | | onComplete | function | no | - | Callback when countdown completes | | onTick | function | no | - | Callback on every tick |

💡 Examples

Basic Countdown

<FlipClockCountdown to={new Date('2025-12-31').getTime()} labels={['DAYS', 'HOURS', 'MINUTES', 'SECONDS']} />

Countup Timer (Stopwatch)

<FlipClockCountdown
  isCountUp={true}
  to={0}
  labels={['HOURS', 'MINUTES', 'SECONDS']}
  renderMap={[false, true, true, true]}
/>

Custom Styled Timer

<FlipClockCountdown
  to={new Date().getTime() + 2 * 60 * 60 * 1000}
  digitBlockStyle={{
    width: 60,
    height: 80,
    fontSize: 40,
    background: 'linear-gradient(45deg, #667eea 0%, #764ba2 100%)',
    color: 'white',
    borderRadius: '10px'
  }}
  labelStyle={{
    fontSize: 14,
    fontWeight: 600,
    color: '#333'
  }}
  separatorStyle={{ color: '#667eea', size: '10px' }}
  duration={0.8}
/>

Date Picker Integration

import React, { useState } from 'react';
import FlipClockCountdown from 'react-flip-clock-countdownup';

function DatePickerTimer() {
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);

  return (
    <div>
      <input type='date' value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} />
      <FlipClockCountdown
        isCountUp={true}
        to={new Date(selectedDate).getTime()}
        labels={['DAYS', 'HOURS', 'MINUTES', 'SECONDS']}
      />
    </div>
  );
}

Hours, Minutes, Seconds Only

<FlipClockCountdown
  isCountUp={true}
  to={0}
  labels={['', 'HOURS', 'MINUTES', 'SECONDS']}
  renderMap={[false, true, true, true]}
  digitBlockStyle={{
    background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    color: 'white'
  }}
/>

🎨 CSS Custom Properties

You can also style the component using CSS custom properties:

.my-timer {
  --fcc-flip-duration: 0.8s;
  --fcc-spacing: 10px;
  --fcc-digit-block-width: 50px;
  --fcc-digit-block-height: 70px;
  --fcc-digit-block-radius: 8px;
  --fcc-digit-font-size: 35px;
  --fcc-digit-color: white;
  --fcc-label-font-size: 12px;
  --fcc-label-color: #333;
  --fcc-background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  --fcc-separator-color: #667eea;
  --fcc-separator-size: 8px;
}

🔧 Development

To set up a local development environment:

1. Clone the repository:

   git clone https://github.com/pandaofhead/react-flip-clock-countdownup.git
   cd react-flip-clock-countdownup

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Run the example app:

   cd examples/react-app
   npm install
   npm start

📝 Changelog

v1.1.0

• ✨ Added date picker integration example
• 🎨 Enhanced styling options
• 📚 Updated documentation with comprehensive examples
• 🔧 Improved TypeScript support

v1.0.0

• 🎉 Initial release
• 🎯 Countdown and countup functionality
• 🎨 Customizable styling
• 📱 Responsive design

🚀 Deployment

GitHub Pages (Free Hosting)

The demo is automatically deployed to GitHub Pages. To deploy manually:

# Deploy to GitHub Pages
npm run deploy

# Or use the deployment script
./deploy.sh

Your demo will be available at: https://pandaofhead.github.io/react-flip-clock-countdownup

Other Hosting Options

You can also deploy the built files from examples/react-app/build/ to any static hosting service:

• Netlify: Drag and drop the build folder
• Vercel: Connect your GitHub repository
• Firebase Hosting: Use Firebase CLI
• AWS S3: Upload to S3 bucket with static website hosting

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © pandaofhead

🙏 Acknowledgments

This project is based on the original react-flip-clock-countdown by leenguyen, enhanced with additional features and improvements.