@gfazioli/mantine-clock
React Clock components and hooks for Mantine with timezone support, countdown timers, customization options, and real-time updates.
Installation
After installation import package styles at the root of your application:
You can import styles within a layer @layer mantine-clock
by importing @gfazioli/mantine-clock/styles.layer.css
file.
Usage
The Clock
component displays a clock with customizable hands, ticks, and numbers.
12
3
6
9
1
2
4
5
7
8
10
11
Static Clock with Value
The Clock
component can display a static time using the value
prop. When running
is set to false
, the clock will show the specified time without animation. If no value
is provided, it displays the current time. The value
prop accepts time strings in various formats or Date objects.
12
3
6
9
1
2
4
5
7
8
10
11
Default Static
(Current Time)
12
3
6
9
1
2
4
5
7
8
10
11
Static Time
15:30
12
3
6
9
1
2
4
5
7
8
10
11
With Seconds
09:45:30
12
3
6
9
1
2
4
5
7
8
10
11
Date Object
11:25:15
Reverse Countdown Clock
This demo showcases how to create a reverse countdown clock by combining the Clock
component with the useClockCountDown
hook. The clock displays the remaining time visually as it counts down, creating a unique reverse clock effect. The clock hands move backwards as time decreases, and the appearance changes when the countdown is completed.
12
3
6
9
1
2
4
5
7
8
10
11
Reverse Clock
Counting Down
Countdown Settings
00:00:00
Status: Paused
Running Clock with Initial Value
You can also set an initial time value for a running clock. The clock will start from the specified time and continue running in real time.
12
3
6
9
1
2
4
5
7
8
10
11
Starts at 08:00
(smooth animation)
12
3
6
9
1
2
4
5
7
8
10
11
Starts at 14:30:45
(tick animation)
12
3
6
9
1
2
4
5
7
8
10
11
From Date Object
(half-tick animation)
Clock Hands
The Clock
component allows you to customize the appearance of the clock hands. You can set the color, size, and other properties of the hour, minute, and second hands.
12
3
6
9
1
2
4
5
7
8
10
11
Clock Numbers
The Clock
component can display numbers on the clock face. You can customize the font size, color, and visibility of the numbers.
12
3
6
9
1
2
4
5
7
8
10
11
Clock Number Fonts
The Clock
component supports custom fonts for the numbers displayed on the clock face. You can choose from various font styles to match your design preferences.
12
3
6
9
1
2
4
5
7
8
10
11
Styling with ClassNames
The Clock
component supports extensive customization through the classNames
prop, allowing you to style every part of the clock using CSS modules or custom CSS classes. This approach gives you complete control over the clock's appearance.
Available ClassNames
The Clock
component exposes the following classNames for styling:
root
- Root element of the clock componentclockContainer
- Main clock containerglassWrapper
- Glass wrapper with shadow effectsclockFace
- Clock face containing all visual elementshourMarks
- Container for hour marks and numbershourTick
- Hour tick marks (12 positions)minuteTick
- Minute tick marks (60 positions, excluding hour positions)number
- Base styles for hour numbers (1-12)primaryNumber
- Primary hour numbers (12, 3, 6, 9)secondaryNumber
- Secondary hour numbers (1, 2, 4, 5, 7, 8, 10, 11)hand
- Base styles for clock handshourHand
- Hour hand specific stylesminuteHand
- Minute hand specific stylessecondHandContainer
- Container for second hand and counterweightsecondHand
- Second hand specific stylessecondHandCounterweight
- Second hand counterweightcenterBlur
- Center blur effectcenterDot
- Center dot at the pivot point
Neon Theme Example
The following example demonstrates a complete custom theme using CSS modules with neon effects, animations, and modern styling techniques:
Neon Cyber Clock Theme
Custom styling using CSS modules and classNames prop
12
3
6
9
1
2
4
5
7
8
10
11
Timezone Support
The Clock
component supports displaying time in different timezones around the world. Use the timezone
prop to specify a timezone string, allowing you to create world clocks or display time for specific regions.
12
3
6
9
1
2
4
5
7
8
10
11
World Clocks Example
Here's an example showing multiple clocks displaying time in different regions simultaneously:
12
3
6
9
1
2
4
5
7
8
10
11
New York
12
3
6
9
1
2
4
5
7
8
10
11
London
12
3
6
9
1
2
4
5
7
8
10
11
Tokyo
Supported Timezones
The timezone prop accepts any valid IANA timezone identifier. Some common examples include:
- UTC:
'UTC'
- Coordinated Universal Time - Americas:
'America/New_York'
,'America/Los_Angeles'
,'America/Chicago'
,'America/Toronto'
- Europe:
'Europe/London'
,'Europe/Berlin'
,'Europe/Paris'
,'Europe/Rome'
- Asia:
'Asia/Tokyo'
,'Asia/Shanghai'
,'Asia/Singapore'
,'Asia/Dubai'
- Oceania:
'Australia/Sydney'
,'Australia/Melbourne'
,'Pacific/Auckland'
When no timezone is specified, the clock displays the local time of the user's system.
Usage Examples
Hooks
useClock Hook
The useClock
hook provides real-time clock data with support for timezones, formatting options, and update frequency control. This hook is perfect for creating digital clocks, displaying time information, or building custom time-based components.
Digital Clock with Controls
00:00:00
1/1/2024 - Week 1
Status: Paused | Timezone: Europe/Rome | Leap Year: No
Milliseconds: 0
World Clocks with useClock
You can use multiple instances of the useClock
hook to display time in different timezones simultaneously:
New York
00:00:00 AM
1/1/2024
London
00:00:00 AM
1/1/2024
Tokyo
00:00:00 AM
1/1/2024
Sydney
00:00:00 AM
1/1/2024
useClock API
The useClock
hook accepts the following options:
The hook returns an object with the following properties:
useClockCountDown Hook
The useClockCountDown
hook provides real-time countdown functionality with support for target dates, duration-based countdowns, and completion callbacks. Perfect for creating countdown timers, event countdowns, or deadline trackers.
Interactive Countdown Timer
00:00:00
Status: Paused
Total milliseconds: 0
Countdown to Specific Dates
You can create countdowns to specific target dates using the targetDate
option:
🎊 New Year 2026
0d 00:00:00
1 months, 0 days
🎃 Halloween 2025
0d 00:00:00
1 months, 0 days
useClockCountDown API
The useClockCountDown
hook accepts the following options:
The hook returns an object with the following properties: