The component props
A React element displaying the current time
The LiveClock component displays the current time and automatically updates at a configurable interval (default: 1 second). It supports full customization of the time format, typography, and styling.
Key Features:
Basic usage with default format:
import { LiveClock } from '@hiyve/utilities';
function Header() {
return <LiveClock />;
}
Custom time format:
import { LiveClock } from '@hiyve/utilities';
function TimeDisplay() {
return (
<LiveClock
variant="h6"
labels={{
formatTime: (date) => date.format('HH:mm:ss'),
}}
/>
);
}
With custom styling:
import { LiveClock } from '@hiyve/utilities';
function StyledClock() {
return (
<LiveClock
variant="body1"
styles={{ padding: 1, textAlign: 'left' }}
colors={{ text: '#1976d2' }}
sx={{ fontFamily: 'monospace' }}
/>
);
}
A self-contained live time display that updates every second.