SharePoint styled React countdown timer UI for server-time-timer-yoLabs
npm install server-time-timer-yolabs-uiserver-time-timer-yolabs (server-synchronized core engine)
server-time-timer-yolabs-ui uses server time as the single source of truth, ensuring:
bash
npm install server-time-timer-yolabs-ui
`
or
`bash
yarn add server-time-timer-yolabs-ui
`
---
🔧 React / Next.js Usage
`tsx
import { ServerTimerUI } from 'server-time-timer-yolabs-ui';
export default function App() {
return (
size="lg"
layout="horizontal"
theme="brand"
showLabels={true}
innerShape="rectangle"
equalUnitSize={true}
showUnits={{
days: true,
hours: true,
minutes: true,
seconds: true
}}
customColors={{
background: '#fef9f3',
text: '#323130',
unitBackground: '#fffbdd'
}}
onEnd={() => alert('⏰ Time is up!')}
/>
);
}
`
---
🧩 Props / API
`ts
export interface ServerTimerUIProps {
/* Countdown end UTC time (ISO string) /
endTime: string;
/* Visual size /
size?: 'sm' | 'md' | 'lg';
/* Layout direction /
layout?: 'horizontal' | 'vertical' | 'compact';
/* Built-in theme /
theme?: 'light' | 'dark' | 'brand';
/* Show or hide unit labels /
showLabels?: boolean;
/* Shape of the inner unit background /
innerShape?: 'rectangle' | 'circle';
/* Force equal width & height for all units /
equalUnitSize?: boolean;
/* Control visible time units /
showUnits?: {
days?: boolean;
hours?: boolean;
minutes?: boolean;
seconds?: boolean;
};
/* Optional wrapper class /
className?: string;
/* Override theme colors /
customColors?: {
background?: string;
text?: string;
unitBackground?: string;
};
/* Callback when countdown reaches zero /
onEnd?: () => void;
}
`
---
🎨 Layouts
$3
* Units displayed in a row
* Ideal for dashboards and desktop views
$3
* Units stacked vertically
* Best for mobile screens and side panels
$3
* Minimal spacing, label-free by default
* Perfect for cards, headers, and widgets
---
🎭 Themes
Built-in enterprise themes:
* light – clean light UI
* dark – enterprise dark mode
* brand – SharePoint / corporate branding
`tsx
`
---
🔘 Labels Control
`tsx
`
* Useful for compact layouts
* Cleaner UI for cards and widgets
---
🔵 Inner Unit Shape
`tsx
`
Available options:
* rectangle (default)
* circle
✔ SharePoint-style
✔ Pixel-perfect sizing
---
📐 Equal Unit Sizing
`tsx
`
* All units have identical width & height
* Prevents layout jumping
* Recommended for enterprise dashboards
---
⚡ Custom Colors
`ts
customColors={{
background: '#fff8f0',
text: '#333',
unitBackground: '#ffe5b4'
}}
`
* Optional
* Overrides theme defaults safely
---
🕒 Optional Units
`ts
showUnits={{
days: false,
hours: true,
minutes: true,
seconds: true
}}
`
* Hide unused units
* Ideal for short-duration timers
---
📱 Responsive & Overflow-Safe
* Uses flex + controlled wrapping
* Size-based typography scaling
* No number jumping or reflow
* Vertical layout recommended for small screens
✔ Mobile-safe
✔ Dashboard-safe
---
🔁 Server Re-Sync (Long Timers)
For long-running sessions, periodically re-sync server time:
`ts
setInterval(async () => {
const res = await fetch('/api/server-time');
const data = await res.json();
timer.sync(data.now);
}, 30000);
`
* Prevents long-term drift
* Enterprise best practice
---
🔧 Framework-Agnostic Usage
For Angular, Vue, or Vanilla JS, use the core engine directly:
`ts
import { createServerTimer } from 'server-time-timer-yolabs';
const timer = createServerTimer({
endTime: new Date(Date.now() + 10 60 1000).toISOString()
});
timer.onTick(t => {
console.log(${t.hours}h ${t.minutes}m ${t.seconds}s);
});
timer.start();
``