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

🏗️ 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={tz => setSelectedTimezone(tz)}
        />
      </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 />
        {'}'}
      </div>
    </div>
  )
}

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

🕹️ Props

• value - { value: string, label: string }
• onBlur - () => void
• onChange - (timezone) => void
• any other react-select props, className, etc. - we pass it all on down now.

🖥️ Example

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

Theres a small example page / implementation 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 at localhost:3001

🚧 Contributing

Pull requests are always welcome!

🙏 Thanks

• Carlos Matallin + Demo
• spacetime
• react-select