react-timezone-select

🌐⌚ react-timezone-select

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 of moment.js, reducing bundle size by ~66%!
Update: v0.10+ now built with Typescript!

Demo: 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 as well as with moment, showing how one might use this component in a real application.

🏗️ Installing

npm install react-timezone-select

🔭 Usage

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)

🕹️ 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',
     altName: 'Alaskan Standard Time'
   }
  

• labelStyle - 'original' | 'altName' | 'abbrev'
• timezones - Custom Timezone Object - see below..
• Any other react-select 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
• Carlos Matallin
• spacetime
• react-select