react-timezone-select 3.0.1 → 3.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 +8 -6
- package/dist/index.d.ts +0 -1
- package/package.json +1 -1
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
|
@@ -18,7 +18,6 @@ type TimezoneSelectOptions = {
|
|
|
18
18
|
labelStyle?: ILabelStyle;
|
|
19
19
|
displayValue?: IDisplayValue;
|
|
20
20
|
timezones?: ICustomTimezone;
|
|
21
|
-
maxAbbrLength?: number;
|
|
22
21
|
};
|
|
23
22
|
type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
|
|
24
23
|
value: ITimezone;
|
package/package.json
CHANGED