Popularity
1.0
Growing
Activity
6.3
Declining
15
2
5

Monthly Downloads: 0
Programming language: TypeScript
License: MIT License
Latest version: v0.9.9

react-timezone-select alternatives and similar libraries

Based on the "Date / Time picker" category.
Alternatively, view react-timezone-select alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-timezone-select or a related project?

Add another 'Date / Time picker' Library

README

๐ŸŒโŒš react-timezone-select

Bundlephobia NPM Downloads npm GitHub issues MIT

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'
  • Any other react-select props

New in 0.9.0 - We've added multiple label styles, based upon a generous pull request and the spacetime-informal library.

original

original labelstyle

altName

altName labelstyle

abbrev

abbrev labelstyle

The demo page will show you all three types of values available for each selected timezone.

๐Ÿšง Contributing

Pull requests are always welcome!

๐Ÿ™ Thanks


*Note that all licence references and agreements mentioned in the react-timezone-select README section above are relevant to that project's source code only.