# 🌐⌚ react-timezone-select

[![Bundlephobia](https://badgen.net/bundlephobia/minzip/react-timezone-select?style=flat-square)](https://bundlephobia.com/result?p=react-timezone-select@0.8.3)
[![NPM Downloads](https://img.shields.io/npm/dm/react-timezone-select?style=flat-square)](https://www.npmjs.com/package/react-timezone-select)
[![npm](https://img.shields.io/npm/v/react-timezone-select?style=flat-square)](https://www.npmjs.com/package/react-timezone-select)
[![GitHub issues](https://img.shields.io/github/issues/ndom91/react-timezone-select?style=flat-square)](https://github.com/ndom91/react-timezone-select/issues)
[![Test CI](https://github.com/ndom91/react-timezone-select/workflows/Tests%20CI/badge.svg)](https://github.com/ndom91/react-timezone-select/actions?query=workflow%3A%22Tests+CI%22)
[![MIT](https://badgen.net/badge/license/MIT/blue?style=flat-square)](https://github.com/ndom91/react-timezone-select/blob/main/LICENSE)

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`](https://github.com/spencermountain/spacetime) instead of [`moment.js`](https://momentjs.com), reducing bundle size by **~66%**!  
> Update: **v0.10+** now built with Typescript!

#### Demo: [ndom91.github.io/react-timezone-select](https://ndom91.github.io/react-timezone-select/)

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

We also have some examples available on Codesandbox using this component with the datetime library [spacetime](https://codesandbox.io/s/react-timezone-select-usage-z37hf) as well as with [moment](https://codesandbox.io/s/react-timezone-select-usage-moment-5n6vn), showing how one might use this component in a real application.

## 🏗️ Installing

```bash
npm install react-timezone-select
```

## 🔭 Usage

```jsx
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
        style={{
          backgroundColor: '#ccc',
          padding: '20px',
          margin: '20px auto',
          borderRadius: '5px',
          maxWidth: '600px',
        }}
      >
        <pre
          style={{
            margin: '0 20px',
            fontWeight: 500,
            fontFamily: 'monospace',
          }}
        >
          {JSON.stringify(selectedTimezone, null, 2)}
        </pre>
      </div>
    </div>
  )
}

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

### Setting Users Timezone as Default

If you'd like the user's own timezone to be set as the initially selected option, we can make use of the new `Intl` browser api by setting the default state value to `Intl.DateTimeFormat().resolvedOptions().timeZone`.

```jsx
const [timezone, setTimezone] = useState(
  Intl.DateTimeFormat().resolvedOptions().timeZone
)
```

Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25)!

### ⚠ Next.js Users

For now, Next.js isn't great about handling ESM packages. Until this gets fixed, a workaround involves using [`next-transpile-modules`](https://www.npmjs.com/package/next-transpile-modules) like so:

```js
// next.config.js
const withTM = require('next-transpile-modules')(['react-timezone-select']);

module.exports = withTM({
  ...
})
```

## 🕹️ Props

- `value` - Initial Timezone `string`, i.e. `'Europe/Amsterdam'` or the full object from the onChange function: `{ value: string, label: string, abbrev: string, altName: string }`
- `onBlur` - `() => void`
- `onChange` - `(timezone) => void`
  - Example `timezone` parameter:
  ```
   {
     value: 'America/Juneau'
     label: '(GMT-8:00) Alaska,
     abbrev: 'AHST',
     offset: -8,
     altName: 'Alaskan Standard Time'
   }
  ```
- `labelStyle` - `'original' | 'altName' | 'abbrev'`
- `timezones` - Custom Timezone Object - see below..
- Any other [`react-select`](https://github.com/jedwatson/react-select#props) props

## 🕒 Custom Timezones

New in `v0.9.11+` we've shipped a prop to allow users to either fully replace the timezone options or append custom choices of their own.

The `timezones` prop takes a dictionary of timezones, i.e. an object where the key/value format is: `{ 'IANA Timezone Name' : 'Your Label' }` - don't worry we'll prepend the `(GMT...)` part, just pass the city(s) or region(s) you want in your label.

For example:

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

<TimezoneSelect
  value={selectedTimezone}
  onChange={setSelectedTimezone}
  timezones={{
     ...i18nTimezones,
    'America/Lima': 'Pittsburgh',
    'Europe/Berlin': 'Frankfurt',
  }}
/>
```

This will generate two additional choices in our dropdown, one with the label `'(GMT-5:00) Pittsburgh'` and another with `'(GMT+1:00) Frankfurt'`. One could also omit spreading in the `i18nTimezones` object and pass in ones own completely custom list of timezone choices.

## 🚧 Contributing

Pull requests are always welcome! Please stick to the `prettier` settings, and if adding new features, please consider adding test(s) and some notes in the README, where appropriate.

## 🙏 Thanks

- [All Contributors](https://github.com/ndom91/react-timezone-select/graphs/contributors)
- [Carlos Matallin](https://github.com/matallo/)
- [spacetime](https://github.com/spencermountain/spacetime)
- [react-select](https://react-select.com)