react-timezone-select 3.0.1 → 3.0.3
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 +8 -6
- package/dist/index.d.ts +8 -10
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -18,12 +18,11 @@ While looking around for a good option, I had trouble finding a timezone select
|
|
|
18
18
|
|
|
19
19
|
> This demo is also available in the `./examples` directory. Simply run `pnpm dev` in the root of the repository and the vite dev server will start, where you can then find the example app at [`localhost:3001`](http://localhost:3001).
|
|
20
20
|
|
|
21
|
-
We also have some **more examples** available on Codesandbox using this component with the datetime library `spacetime` ([example](https://codesandbox.io/s/react-timezone-select-usage-z37hf)) as well as with `moment` ([example](https://codesandbox.io/s/react-timezone-select-usage-moment-5n6vn)), as well as in Typescript using the new `Intl` browser API ([example](https://codesandbox.io/s/react-timezone-select-typescript-8lsv3?file=/src/App.tsx)) showing how one might use this component in a real application.
|
|
22
|
-
|
|
23
21
|
## 🏗️ Installing
|
|
24
22
|
|
|
25
23
|
```bash
|
|
26
|
-
|
|
24
|
+
// react-select is an optional peer dependency, unnecessary if using the hook
|
|
25
|
+
npm install react-timezone-select react-select
|
|
27
26
|
```
|
|
28
27
|
|
|
29
28
|
## 🔭 Usage
|
|
@@ -31,10 +30,10 @@ npm install react-select react-timezone-select
|
|
|
31
30
|
```jsx
|
|
32
31
|
import React, { useState } from 'react'
|
|
33
32
|
import ReactDOM from 'react-dom'
|
|
34
|
-
import TimezoneSelect from 'react-timezone-select'
|
|
33
|
+
import TimezoneSelect, { type ITimezone } from 'react-timezone-select'
|
|
35
34
|
|
|
36
35
|
const App = () => {
|
|
37
|
-
const [selectedTimezone, setSelectedTimezone] =useState(
|
|
36
|
+
const [selectedTimezone, setSelectedTimezone] = useState<ITimezone>(
|
|
38
37
|
Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
39
38
|
)
|
|
40
39
|
|
|
@@ -97,7 +96,10 @@ You can append custom choices of your own, or fully replace the listed timezone
|
|
|
97
96
|
The `timezones` prop takes a dictionary of timezones. Don't worry, we'll prepend the `(GMT...)` part, you just have to pass the city(s) or region(s) you want in your label.
|
|
98
97
|
|
|
99
98
|
```jsx
|
|
100
|
-
import TimezoneSelect, { allTimezones } from 'react-timezone-select'
|
|
99
|
+
import TimezoneSelect, { type ITimezone, allTimezones } from 'react-timezone-select'
|
|
100
|
+
|
|
101
|
+
const [selectedTimezone, setSelectedTimezone] = useState<ITimezone>('Europe/Berlin')
|
|
102
|
+
|
|
101
103
|
<TimezoneSelect
|
|
102
104
|
value={selectedTimezone}
|
|
103
105
|
onChange={setSelectedTimezone}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,26 +1,24 @@
|
|
|
1
|
-
import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
|
|
2
1
|
import { Props as Props$1 } from 'react-select';
|
|
3
2
|
|
|
4
|
-
type ICustomTimezone = {
|
|
3
|
+
declare type ICustomTimezone = {
|
|
5
4
|
[key: string]: string;
|
|
6
5
|
};
|
|
7
|
-
type ILabelStyle = 'original' | 'altName' | 'abbrev' | 'offsetHidden';
|
|
8
|
-
type IDisplayValue = 'GMT' | 'UTC';
|
|
9
|
-
type ITimezoneOption = {
|
|
6
|
+
declare type ILabelStyle = 'original' | 'altName' | 'abbrev' | 'offsetHidden';
|
|
7
|
+
declare type IDisplayValue = 'GMT' | 'UTC';
|
|
8
|
+
declare type ITimezoneOption = {
|
|
10
9
|
value: string;
|
|
11
10
|
label: string;
|
|
12
11
|
abbrev?: string;
|
|
13
12
|
altName?: string;
|
|
14
13
|
offset?: number;
|
|
15
14
|
};
|
|
16
|
-
type ITimezone = ITimezoneOption | string;
|
|
17
|
-
type TimezoneSelectOptions = {
|
|
15
|
+
declare type ITimezone = ITimezoneOption | string;
|
|
16
|
+
declare type TimezoneSelectOptions = {
|
|
18
17
|
labelStyle?: ILabelStyle;
|
|
19
18
|
displayValue?: IDisplayValue;
|
|
20
19
|
timezones?: ICustomTimezone;
|
|
21
|
-
maxAbbrLength?: number;
|
|
22
20
|
};
|
|
23
|
-
type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
|
|
21
|
+
declare type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
|
|
24
22
|
value: ITimezone;
|
|
25
23
|
onChange?: (timezone: ITimezone) => void;
|
|
26
24
|
};
|
|
@@ -31,6 +29,6 @@ declare function useTimezoneSelect({ timezones, labelStyle, displayValue, }: Tim
|
|
|
31
29
|
parseTimezone: (zone: ITimezone) => ITimezoneOption;
|
|
32
30
|
options: ITimezoneOption[];
|
|
33
31
|
};
|
|
34
|
-
declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, displayValue, timezones, ...props }: Props) =>
|
|
32
|
+
declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, displayValue, timezones, ...props }: Props) => JSX.Element;
|
|
35
33
|
|
|
36
34
|
export { ILabelStyle, ITimezone, ITimezoneOption, Props, TimezoneSelectOptions, allTimezones, TimezoneSelect as default, useTimezoneSelect };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-timezone-select",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"description": "Usable, dynamic React Timezone Select",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && pnpm dev\"",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"react": "^18 || ^17.0.1 || ^16",
|
|
51
51
|
"react-dom": "^18 || ^17.0.1 || ^16",
|
|
52
|
-
"react-select": "^5.7.
|
|
52
|
+
"react-select": "^5.7.3"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"spacetime": "^7.4.8",
|