@krustyc/react-timezone

3.0.1 • Public • Published

react-timezone

Timezone Picker for React

Demo

Available here.

Installation

$ npm install react-timezone

Usage

This a controlled element. value and onChange needs to be set. Values are timezone codenames.

You can style the container element with className and style props.

Passing an object as inputProps prop will pass it to the underlying input. It can be used for setting name, placeholder on input or listening to input events.

Minimal styles are included with the build.

Timezones are included in the bundle and can be accessed by importing timezones from the package.

A zone object's structure is like this:

{
  name: string,
  label: string,
  offset: number,
}

Timezones

Timezones are stolenborrowed from Google Calendar.

Example

import TimezonePicker from 'react-timezone';

export default () => (
  <TimezonePicker
    value="Asia/Yerevan"
    onChange={timezone => console.log('New Timezone Selected:', timezone)}
    inputProps={{
      placeholder: 'Select Timezone...',
      name: 'timezone',
    }}
  />
);

Package Sidebar

Install

npm i @krustyc/react-timezone

Weekly Downloads

22

Version

3.0.1

License

MIT

Unpacked Size

563 kB

Total Files

20

Last publish

Collaborators

  • krustyc