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
        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.

const [timezone, setTimezone] = useState(
  Intl.DateTimeFormat().resolvedOptions().timeZone
)

Thanks @ndrwksr!

⚠ 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 like so:

// 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 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