react-flip-clock-countdownup
Version:
A 3D animated countdown and countup component for React with date picker integration and enhanced styling options.
264 lines (200 loc) • 8.78 kB
Markdown
> A 3D animated countdown and countup component for React with date picker integration and enhanced styling options.
[](https://www.npmjs.com/package/react-flip-clock-countdownup) [](https://standardjs.com)
<div align="center">
<img src="./resources/demo.gif" alt="react flip clock countdown demo" width="500" />
<h3>🚀 <a href="https://pandaofhead.github.io/react-flip-clock-countdownup" target="_blank">Live Demo</a></h3>
<p>See all features in action with interactive examples and code snippets!</p>
</div>
- 🎯 **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
```bash
npm install react-flip-clock-countdownup
```
Or with yarn:
```bash
yarn add react-flip-clock-countdownup
```
```tsx
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;
```
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
```tsx
<FlipClockCountdown to={new Date('2025-12-31').getTime()} labels={['DAYS', 'HOURS', 'MINUTES', 'SECONDS']} />
```
```tsx
<FlipClockCountdown
isCountUp={true}
to={0}
labels={['HOURS', 'MINUTES', 'SECONDS']}
renderMap={[false, true, true, true]}
/>
```
```tsx
<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}
/>
```
```tsx
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>
);
}
```
```tsx
<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'
}}
/>
```
You can also style the component using CSS custom properties:
```css
.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:
--fcc-background: linear-gradient(45deg,
--fcc-separator-color:
--fcc-separator-size: 8px;
}
```
To set up a local development environment:
1. Clone the repository:
```bash
git clone https://github.com/pandaofhead/react-flip-clock-countdownup.git
cd react-flip-clock-countdownup
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm start
```
4. Run the example app:
```bash
cd examples/react-app
npm install
npm start
```
- ✨ Added date picker integration example
- 🎨 Enhanced styling options
- 📚 Updated documentation with comprehensive examples
- 🔧 Improved TypeScript support
- 🎉 Initial release
- 🎯 Countdown and countup functionality
- 🎨 Customizable styling
- 📱 Responsive design
The demo is automatically deployed to GitHub Pages. To deploy manually:
```bash
npm run deploy
./deploy.sh
```
Your demo will be available at: `https://pandaofhead.github.io/react-flip-clock-countdownup`
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
Contributions are welcome! Please feel free to submit a Pull Request.
MIT © [pandaofhead](https://github.com/pandaofhead)
This project is based on the original [react-flip-clock-countdown](https://github.com/sLeeNguyen/react-flip-clock-countdown) by leenguyen, enhanced with additional features and improvements.