react-multi-timezone-viewer 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +116 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,116 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
|
|
2
|
+
# 🕒 react-multi-timezone-viewer
|
|
3
|
+
|
|
4
|
+
A smart React component that displays a given datetime in multiple timezones with daylight saving adjustments.
|
|
5
|
+
On hover, it shows a tooltip with selected timezones and an easy-to-use configuration dialog.
|
|
6
|
+
User preferences can be shared across websites using secure storage hosted by [explisoft.com](https://www.explisoft.com).
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## ✨ Features
|
|
11
|
+
|
|
12
|
+
- 🕰 Hover to view time in multiple timezones
|
|
13
|
+
- ⚙️ Configurable timezones via gear icon
|
|
14
|
+
- 🌐 Cross-site storage support (optional)
|
|
15
|
+
- ⏱ Automatically adjusts for Daylight Saving Time (DST)
|
|
16
|
+
- 🎨 Custom CSS class support
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 📸 Screenshots
|
|
21
|
+
|
|
22
|
+
### 🔹 Main Component Appearance
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### 🔹 Tooltip on Hover
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### 🔹 Configuration Dialog
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## 📦 Installation
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm install react-multi-timezone-viewer
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 🚀 Usage
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { MultiTimezoneViewer } from 'react-multi-timezone-viewer';
|
|
48
|
+
|
|
49
|
+
export default function MyComponent() {
|
|
50
|
+
return (
|
|
51
|
+
<div>
|
|
52
|
+
Meeting at{' '}
|
|
53
|
+
<MultiTimezoneViewer
|
|
54
|
+
datetime="2025-03-23 06:20:00"
|
|
55
|
+
dateTimeZone="Asia/Kolkata"
|
|
56
|
+
useCrossSiteStorage={true}
|
|
57
|
+
className="my-time-style"
|
|
58
|
+
/>
|
|
59
|
+
</div>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 🔧 Props
|
|
67
|
+
|
|
68
|
+
| Prop | Type | Required | Default | Description |
|
|
69
|
+
|-----------------------|-----------|----------|---------|-----------------------------------------------------------------------------|
|
|
70
|
+
| `datetime` | `string` | ✅ Yes | – | Date & time in `YYYY-MM-DD hh:mm:ss` format |
|
|
71
|
+
| `dateTimeZone` | `string` | ✅ Yes | – | Timezone of the given datetime (e.g. `Asia/Kolkata`) |
|
|
72
|
+
| `useCrossSiteStorage` | `boolean` | ❌ No | `false` | Enable to share preferences via https://www.explisoft.com cross-site storage |
|
|
73
|
+
| `className` | `string` | ❌ No | – | Apply your custom CSS styles to the datetime text |
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## 🧠 How It Works
|
|
78
|
+
|
|
79
|
+
- Hover over the component to see selected timezone conversions
|
|
80
|
+
- Click the ⚙️ gear icon to open a timezone selection dialog
|
|
81
|
+
- If `useCrossSiteStorage` is enabled, timezone preferences are saved using an iframe to explisoft.com
|
|
82
|
+
- Supports all IANA timezones and DST adjustments automatically
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## 🎨 Custom Styling
|
|
87
|
+
|
|
88
|
+
You can pass a `className` to apply your own styles:
|
|
89
|
+
|
|
90
|
+
```css
|
|
91
|
+
.my-time-style {
|
|
92
|
+
color: #3498db;
|
|
93
|
+
font-weight: bold;
|
|
94
|
+
font-family: 'Segoe UI', sans-serif;
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 🛡 Security
|
|
101
|
+
|
|
102
|
+
This component uses secure cross-origin messaging (`postMessage`) to communicate with `https://www.explisoft.com`. No personally identifiable information is stored or transmitted.
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## 📃 License
|
|
107
|
+
|
|
108
|
+
MIT © 2025 [Nishant Kumar](https://nishant.live)
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## 🙌 Contributions
|
|
113
|
+
|
|
114
|
+
Open to pull requests and issues on GitHub. Let's make it better together!
|
|
115
|
+
|
|
116
|
+
GitHub Repo: [https://github.com/Explisoft/react-multi-timezone-viewer](https://github.com/Explisoft/react-multi-timezone-viewer)
|