React select timezone


303.0.010 months ago3 years agoMinified + gzip package size for @capaj/react-select-timezone in KB



A simple component wrapping React-Select and Moment.Timezone to make a timezone picker.

Forked from vinhnglx/react-timezone-select


$ npm install @capaj/react-select-timezone


import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import SelectTimezone, { getTimezoneProps } from 'react-select-timezone'

const App = () => {
  return (
        value={momentTimezone.tz.guess()} // the default, so you can omit if you don't need other value
        isClearable // allows user to have null value in this select
        guess // this will fill the input with user's timezone guessed by moment. A "value" prop has always bigger priority than guessed TZ
        onChange={(val) => {
          console.log(val) // like "Europe/London"
          // if you need to get offset you can use
          const timezoneProps = getTimezoneProps(val)
          console.log(timezoneProps.time) // like "-2.00"
          console.log(timezoneProps.label) // like "(GMT+02:00) Europe/Prague"
          console.log(timezoneProps.offset) // like -120

App.propTypes = {
  name: PropTypes.string

export default App

if you just need to display a timezone in the same format, do import {formatTimezone} from @capaj/react-select-timezone and use that. It will format the Europe/London into (GMT+01:00) Europe/London

Virtual menu list

If you prefer virtualized list, import makeVirtualMenuListComponent and use it like show in the showcase.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.