mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-22 16:35:14 +00:00
159 lines
6.1 KiB
Markdown
Executable File
159 lines
6.1 KiB
Markdown
Executable File
# 🌐⌚ react-timezone-select
|
|
|
|
[](https://bundlephobia.com/result?p=react-timezone-select@0.8.3)
|
|
[](https://www.npmjs.com/package/react-timezone-select)
|
|
[](https://www.npmjs.com/package/react-timezone-select)
|
|
[](https://github.com/ndom91/react-timezone-select/issues)
|
|
[](https://github.com/ndom91/react-timezone-select/actions?query=workflow%3A%22Tests+CI%22)
|
|
[](https://github.com/ndom91/react-timezone-select/blob/main/LICENSE)
|
|
|
|
Another react timezone select component, I know.. However this one has a few key benefits!
|
|
|
|
While looking around for a good option, I had trouble finding a timezone select components which:
|
|
|
|
1\) Adjusted the choices automatically with Daylight Savings Time (DST)
|
|
2\) Didn't have a huge list of choices to scroll through when technically only 24 (ish) are necessary
|
|
|
|
> Update: **v0.7+** now built with [`spacetime`](https://github.com/spencermountain/spacetime) instead of [`moment.js`](https://momentjs.com), reducing bundle size by **~66%**!
|
|
> Update: **v0.10+** now built with Typescript!
|
|
|
|
#### Demo: [ndom91.github.io/react-timezone-select](https://ndom91.github.io/react-timezone-select/)
|
|
|
|
This demo is also available in the `./examples` directory. Simply run `npm start` after installing everything and the webpack dev server will begin, where you can find the demo at `localhost:3001`.
|
|
|
|
We also have some examples available on Codesandbox using this component with the datetime library [spacetime](https://codesandbox.io/s/react-timezone-select-usage-z37hf) as well as with [moment](https://codesandbox.io/s/react-timezone-select-usage-moment-5n6vn), showing how one might use this component in a real application.
|
|
|
|
## 🏗️ Installing
|
|
|
|
```bash
|
|
npm install react-timezone-select
|
|
```
|
|
|
|
## 🔭 Usage
|
|
|
|
```jsx
|
|
import React, { useState } from 'react'
|
|
import ReactDOM from 'react-dom'
|
|
import TimezoneSelect from 'react-timezone-select'
|
|
|
|
const App = () => {
|
|
const [selectedTimezone, setSelectedTimezone] = useState('')
|
|
|
|
return (
|
|
<div className='App'>
|
|
<h2>react-timezone-select</h2>
|
|
<blockquote>Please make a selection</blockquote>
|
|
<div className='select-wrapper'>
|
|
<TimezoneSelect
|
|
value={selectedTimezone}
|
|
onChange={setSelectedTimezone}
|
|
/>
|
|
</div>
|
|
<h3>Output:</h3>
|
|
<div
|
|
style={{
|
|
backgroundColor: '#ccc',
|
|
padding: '20px',
|
|
margin: '20px auto',
|
|
borderRadius: '5px',
|
|
maxWidth: '600px',
|
|
}}
|
|
>
|
|
<pre
|
|
style={{
|
|
margin: '0 20px',
|
|
fontWeight: 500,
|
|
fontFamily: 'monospace',
|
|
}}
|
|
>
|
|
{JSON.stringify(selectedTimezone, null, 2)}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const rootElement = document.getElementById('root')
|
|
ReactDOM.render(<App />, rootElement)
|
|
```
|
|
|
|
### Setting Users Timezone as Default
|
|
|
|
If you'd like the user's own timezone to be set as the initially selected option, we can make use of the new `Intl` browser api by setting the default state value to `Intl.DateTimeFormat().resolvedOptions().timeZone`.
|
|
|
|
```jsx
|
|
const [timezone, setTimezone] = useState(
|
|
Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
)
|
|
```
|
|
|
|
Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25)!
|
|
|
|
### ⚠ Next.js Users
|
|
|
|
For now, Next.js isn't great about handling ESM packages. Until this gets fixed, a workaround involves using [`next-transpile-modules`](https://www.npmjs.com/package/next-transpile-modules) like so:
|
|
|
|
```js
|
|
// next.config.js
|
|
const withTM = require('next-transpile-modules')(['react-timezone-select']);
|
|
|
|
module.exports = withTM({
|
|
...
|
|
})
|
|
```
|
|
|
|
## 🕹️ Props
|
|
|
|
- `value` - Initial Timezone `string`, i.e. `'Europe/Amsterdam'` or the full object from the onChange function: `{ value: string, label: string, abbrev: string, altName: string }`
|
|
- `onBlur` - `() => void`
|
|
- `onChange` - `(timezone) => void`
|
|
- Example `timezone` parameter:
|
|
```
|
|
{
|
|
value: 'America/Juneau'
|
|
label: '(GMT-8:00) Alaska,
|
|
abbrev: 'AHST',
|
|
offset: -8,
|
|
altName: 'Alaskan Standard Time'
|
|
}
|
|
```
|
|
- `labelStyle` - `'original' | 'altName' | 'abbrev'`
|
|
- `timezones` - Custom Timezone Object - see below..
|
|
- Any other [`react-select`](https://github.com/jedwatson/react-select#props) props
|
|
|
|
## 🕒 Custom Timezones
|
|
|
|
New in `v0.9.11+` we've shipped a prop to allow users to either fully replace the timezone options or append custom choices of their own.
|
|
|
|
The `timezones` prop takes a dictionary of timezones, i.e. an object where the key/value format is: `{ 'IANA Timezone Name' : 'Your Label' }` - don't worry we'll prepend the `(GMT...)` part, just pass the city(s) or region(s) you want in your label.
|
|
|
|
For example:
|
|
|
|
```
|
|
import TimezoneSelect, { i18nTimezones } from 'react-timezone-select'
|
|
...
|
|
|
|
<TimezoneSelect
|
|
value={selectedTimezone}
|
|
onChange={setSelectedTimezone}
|
|
timezones={{
|
|
...i18nTimezones,
|
|
'America/Lima': 'Pittsburgh',
|
|
'Europe/Berlin': 'Frankfurt',
|
|
}}
|
|
/>
|
|
```
|
|
|
|
This will generate two additional choices in our dropdown, one with the label `'(GMT-5:00) Pittsburgh'` and another with `'(GMT+1:00) Frankfurt'`. One could also omit spreading in the `i18nTimezones` object and pass in ones own completely custom list of timezone choices.
|
|
|
|
## 🚧 Contributing
|
|
|
|
Pull requests are always welcome! Please stick to the `prettier` settings, and if adding new features, please consider adding test(s) and some notes in the README, where appropriate.
|
|
|
|
## 🙏 Thanks
|
|
|
|
- [All Contributors](https://github.com/ndom91/react-timezone-select/graphs/contributors)
|
|
- [Carlos Matallin](https://github.com/matallo/)
|
|
- [spacetime](https://github.com/spencermountain/spacetime)
|
|
- [react-select](https://react-select.com)
|