@bigbinary/neeto-time-zones

A simple and lightweight NPM package for working with time zones. This package provides a human friendly timezone selector and utility functions for timezones.

Installation

You can install the package using yarn:

yarn add @bigbinary/neeto-time-zones

Importing CSS styles to the main stylesheet

You should add the following to main.scss file:

@import "@bigbinary/neeto-time-zones/dist/style.css";

NeetoTimezoneSelector

Check out the live demo

Usage 1

import { NeetoTimezoneSelector } from "@bigbinary/neeto-time-zones";

const ReactComponent = () => {
  const timezoneRef = useCallback(node => {
    if (!(node !== null)) return;

    new NeetoTimezoneSelector(node, {
      elementId: "custom-selector-element",
      className: "custom-selector-class",
      initialValue: "initial-timezone",
      position: "top",
      onChange: (timezone) => {
        console.log(timezone);
      },
      onHourFormatChange: (timeFormat) => {
        console.log(timeFormat);
      }
    });
  }, []);

  return (
    <div
      ref={timezoneRef}
    />
  );
};

Usage 2

import NeetoTimezoneSelector from "@bigbinary/neeto-time-zones/react";

const ReactComponent = () => {
  return (
    <NeetoTimezoneSelector
      elementId="custom-selector-element"
      className="custom-selector-class"
      initialValue="initial-timezone"
      position="top"
      onChange={(timezone) => {
        console.log(timezone);
      }}
      onHourFormatChange={(timeFormat) => {
        console.log(timeFormat);
      }}
    />
  );
}

Configuration

You can pass options as the second parameter to configure the timezone selector component.

1. elementId: ID for the NeetoTimezoneSelector. By default the ID will be timezone-selector
2. className: Custom classes that can be added to the component.
3. initialValue: Initial Value of the timezone selector.
4. position: Position in which the selector should open in. Available options: top, bottom. Default position is bottom.
5. onChange: Function to be called when the timezone selector changes.
6. onHourFormatChange: Function to be called when the time format changes.
7. isTimeFormatSwitchVisible: Setting this to false will hide the time format toggle. The default value is true.
8. isTimeFormat24H: When the internal time format toggle is disabled, use this prop to pass the time format option. This will be used to change the time format inside the timezone selector.

ianaTimezoneToHumanReadable

import { ianaTimezoneToHumanReadable } from "@bigbinary/neeto-time-zones";

ianaTimezoneToHumanReadable("Asia/Calcutta") // => Indian Standard Time

ianaTimezoneToHumanReadable("America/New_York") // => Eastern Standard Time

ianaTimezoneToHumanReadable("Europe/Berlin") // => Central Standard Time

Development

Clone the repo

git clone [e-mail]:bigbinary/neeto-time-zones.git
cd neeto-timezones/js
yarn install
yarn dev

To bundle with host app:

yarn build && cp dist/* ../../neeto-cal-web/node_modules/@bigbinary/neeto-time-zones/dist

Instructions for Publishing

A package is released upon merging a PR labeled as patch, minor, or major into the main branch. The patch label addresses bug fixes, minor signifies the addition of new features, and major denotes breaking changes, adhering to the principles outlined in Semantic Versioning (SemVer).

You can checkout the Create and publish releases workflow in GitHub Actions to get a live update.