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%!

Demo: ndom91.github.io/react-timezone-select

This demo is also available in the ./examples directory. Simply run npm start after installing everything and webpack dev server should begin, where you will be able to find the demo locally at localhost:3001.

There is also a Codesandbox usage example for adjusting the timezone of a selected spacetime object, like how one might use this in a real app.

🏗️ Installing

npm install --save-prod 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'>
        <span style={{ fontWeight: '500' }}>selectedTimezone: {'{'}</span>{' '}
        <br />
        <span style={{ marginLeft: '20px', fontWeight: '500' }}>
          value: '{selectedTimezone.value}'
        </span>
        <br />
        <span style={{ marginLeft: '20px', fontWeight: '500' }}>
          label: '{selectedTimezone.label}'
        </span>
        <br />
        <span style={{ marginLeft: '20px', fontWeight: '500' }}>
          altName: '{selectedTimezone.altName}'
        </span>
        <br />
        <span style={{ marginLeft: '20px', fontWeight: '500' }}>
          abbrev: '{selectedTimezone.abbrev}'
        </span>
        <br />
        {'}'}
      </div>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

🕹️ Props

• value - { value: string, label: string, altName: string, abbrev: string }
• onBlur - () => void
• onChange - (timezone) => void
  • Where timezone is, for example:

   {
     value: 'America/Juneau'
     label: '(GMT-8:00) Alaska (AHDT)'
     altName: 'Alaskan Daylight Time'
     abbrev: 'AHDT'
   }
  

• labelStyle - 'original' | 'altName' | 'abbrev'
• timezone - Custom Timezone Object
• Any other react-select props

🕒 Custom Timezones

New in v0.9.11, we shipped a new prop to allow users to fully replace the timezone choices, or simply append a few custom choices.

The prop timezones takes an object where the key/value format is simply 'Official Timezone Name' : 'Your Label for it'. So for example:

import { TimezoneSelect, i18nTimezones } from 'react-timezone-select'
...

<TimezoneSelect
  value={selectedTimezone}
  onChange={setSelectedTimezone}
  labelStyle={labelStyle}
  onBlur={() => console.log('Blur!')}
  timezones={{
     ...i18nTimezones
    'America/Lima': 'Pittsburgh',
    'Europe/Berlin': 'Frankfurt',
  }}
/>

Here you can see we're simply appending two new choices to the existing ones. You can omit the i18nTimezones object in the prop though and pass in your own complete custom list of timezone options.

🚧 Contributing

Pull requests are always welcome!

🙏 Thanks

• Carlos Matallin
• spacetime
• react-select