React Timezone Picker

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

import React from 'react';
import TimezonePicker from 'react-timezone-picker';

const MyComponent() => {
        return (
            <TimezonePicker onChange={console.log} />
        )
    })

Use With Options

import React from 'react';
import TimezonePicker from 'react-timezone-picker';

const MyComponent() => {
        return (
            <TimezonePicker
                onChange={console.log}
                defaultValue={'America/New_York'}
                unselectLabel="No Timezone"
                style={{
                    borderRadius: '0.5rem',
                    background: 'teal',
                    color: 'white',
                }}
            />
        )
    })

Options

Customize timezone picker by passing these, or any other props valid on the <select /> 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 and the examples source code 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.