Popularity
0.3
Growing
Activity
4.8
Stable
1
1
0

Monthly Downloads: 0
Programming language: JavaScript

react-timezone-select alternatives and similar libraries

Based on the "Date / Time picker" category

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

NPM Downloads npm GitHub issues NPM

Another react timezone select component, I know.. However this one has a few key benefits!

While looking around for a good one, I had trouble finding a timezone select components which:

1) Adjusted the choices with Daylight Savings Time (DST)
2) Didn't have a huge list of choices to scroll through when technically only 24 (ish) are necessary.

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

🏗️ Installing

npm install react-timezone-select

🔭 Usage

import React from 'react'
import ReactDOM from 'react-dom'
import Select from 'react-timezone-select'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selectedOption: {}
    }
  }

  handleChange = selectedOption => {
    this.setState({ selectedOption: selectedOption })
  }

  render() {
    const {
      selectedOption
    } = this.state

    return (
      <div className="App">
        <div className="select-wrapper">
          <Select 
            value={selectedOption} 
            onChange={this.handleChange}
          />
        </div>
        <h3>{selectedOption.value} - {selectedOption.label}</h3>
      </div>
    )
  }
}

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

🖥️ 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

[Screenshot 1](screenshots/1.png)

[Screenshot 3](screenshots/3.png)

🚧 Contributing

Pull requests are always welcome! Please use standard.js

🙏 Thanks