🕒 react-multi-timezone-viewer

A smart React component that displays a given datetime in multiple timezones with daylight saving adjustments.
On hover, it shows a tooltip with selected timezones and an easy-to-use configuration dialog.
User preferences can be shared across websites using secure storage hosted by explisoft.com.

---

✨ Features

- 🕰 Hover to view time in multiple timezones
- ⚙️ Configurable timezones via gear icon
- 🌐 Cross-site storage support (optional)
- ⏱ Automatically adjusts for Daylight Saving Time (DST)
- 🎨 Custom CSS class support

---

📸 Screenshots

$3

!Main component appearance

$3

!Tooltip showing multiple timezones

$3

!Timezone selection dialog

---

📦 Installation

``bash
npm install react-multi-timezone-viewer
`

---

🚀 Usage

`tsx
import { MultiTimezoneViewer } from 'react-multi-timezone-viewer';

export default function MyComponent() {
return (



);
}
`

---

🔧 Props

| Prop | Type | Required | Default | Description |
|-----------------------|-----------|----------|---------|-----------------------------------------------------------------------------|
| datetime | string | ✅ Yes | – | Date & time in YYYY-MM-DD hh:mm:ss format |
| dateTimeZone | string | ✅ Yes | – | Timezone of the given datetime (e.g. Asia/Kolkata) |
| useCrossSiteStorage | boolean | ❌ No | false | Enable to share preferences via https://www.explisoft.com cross-site storage |
| className | string | ❌ No | – | Apply your custom CSS styles to the datetime text |

---

🧠 How It Works

- Hover over the component to see selected timezone conversions
- Click the ⚙️ gear icon to open a timezone selection dialog
- If useCrossSiteStorage is enabled, timezone preferences are saved using an iframe to explisoft.com
- Supports all IANA timezones and DST adjustments automatically

---

🎨 Custom Styling

You can pass a className to apply your own styles:

`css
.my-time-style {
color: #3498db;
font-weight: bold;
font-family: 'Segoe UI', sans-serif;
}
`

---

🛡 Security

This component uses secure cross-origin messaging (postMessage) to communicate with https://www.explisoft.com`. No personally identifiable information is stored or transmitted.

---

📃 License

MIT © 2025 Nishant Kumar

---

🙌 Contributions

Open to pull requests and issues on GitHub. Let's make it better together!

GitHub Repo: https://github.com/Explisoft/react-multi-timezone-viewer