🌐⌚ react-timezone-select
![MIT](https://badgen.net/badge/license/MIT/blue?style=flat-square)
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%!
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
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](https://imgur.com/NveHGpg.png)
altName
![altName labelstyle](https://imgur.com/7sxgNbj.png)
abbrev
![abbrev labelstyle](https://imgur.com/WQPNlw2.png)
The demo page will show you all three types of values available for each selected timezone.
🚧 Contributing
Pull requests are always welcome!
🙏 Thanks