https://github.com/benshope/react-timezone-picker

React Timezone Picker
https://github.com/benshope/react-timezone-picker

component react timezone timezone-picker ui-components

Last synced: about 1 month ago
JSON representation

React Timezone Picker

• Host: GitHub
• URL: https://github.com/benshope/react-timezone-picker
• Owner: benshope
• Created: 2019-03-12T03:14:20.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T10:21:45.000Z (almost 2 years ago)
• Last Synced: 2023-05-31T23:35:54.922Z (over 1 year ago)
• Topics: component, react, timezone, timezone-picker, ui-components
• Language: JavaScript
• Homepage: https://benshope.github.io/react-timezone-picker
• Size: 29.9 MB
• Stars: 5
• Watchers: 0
• Forks: 2
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Timezone Picker

![gzip size](http://img.badgesize.io/https://unpkg.com/react-timezone-picker/dist/index.js?compression=gzip&style=for-the-badge)

[![npm version](https://img.shields.io/npm/v/react-timezone-picker.svg?style=for-the-badge)](https://www.npmjs.com/package/react-timezone-picker)

[![npm downloads](https://img.shields.io/npm/dm/react-timezone-picker.svg?style=for-the-badge)](https://www.npmjs.com/package/react-timezone-picker)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://en.wikipedia.org/wiki/MIT_License)

This is a React component for selecting a timezone. The implementation is one file, it can be styled, and it has no dependencies.

## Install

-   **Npm:** `npm install react-timezone-picker`

-   **Yarn:** `yarn add react-timezone-picker`

## Use

```jsx

import React from 'react';

import TimezonePicker from 'react-timezone-picker';

const MyComponent() => {

        return (

            

        )

    })

```

## Use With Options

```jsx

import React from 'react';

import TimezonePicker from 'react-timezone-picker';

const MyComponent() => {

        return (

            

        )

    })

```

## Options

Customize timezone picker by passing these, or any other props valid on the `` element, to the component:

| Prop          | Description                                                                                        |

| ------------- | -------------------------------------------------------------------------------------------------- |

| onChange      | initial open state of the modal                                                                    |

| defaultValue  | the value the timezone picker is initially set to                                                  |

| value         | pass a value into the picker making it a controlled component                                      |

| unselectLabel | the label for selecting undefined (the undefined option does not appear without a label specified) |

| style         | styles for the  element                                                                    |

See the [examples](https://benshope.github.io/react-timezone-picker) and the [examples source code](https://github.com/benshope/react-timezone-picker/blob/master/stories.js) for more snippets to copy.

## Help

If there are any examples you'd like to see or use cases I didn't cover, please [file an issue](https://github.com/benshope/react-timezone-picker/issues/new).