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
instead ofmoment.js
, reducing bundle size by ~66%!
Update: v0.10+ now built with Typescript!
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 as well as with moment, showing how one might use this component in a real application.
npm install react-timezone-select
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 className='code'>
<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)
value
- Initial Timezonestring
, 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', altName: 'Alaskan Standard Time' }
- Example
labelStyle
-'original' | 'altName' | 'abbrev'
timezones
- Custom Timezone Object - see below..- Any other
react-select
props
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.
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.