🕒 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

🔹 Main Component Appearance

🔹 Tooltip on Hover

🔹 Configuration Dialog

📦 Installation

npm install react-multi-timezone-viewer

🚀 Usage

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

export default function MyComponent() {
  return (
    <div>
      Meeting at{' '}
      <MultiTimezoneViewer
        datetime="2025-03-23 06:20:00"
        dateTimeZone="Asia/Kolkata"
        useCrossSiteStorage={true}
        className="my-time-style"
      />
    </div>
  );
}

🔧 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:

.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