@bigbinary/neeto-time-zones
v0.6.6
Published
![npm version](https://img.shields.io/npm/v/@bigbinary/neeto-time-zones.svg) ![license](https://img.shields.io/npm/l/@bigbinary/neeto-time-zones.svg)
Downloads
8,866
Readme
@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
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.
- elementId: ID for the NeetoTimezoneSelector. By default the ID will be
timezone-selector
- className: Custom classes that can be added to the component.
- initialValue: Initial Value of the timezone selector.
- position: Position in which the selector should open in. Available options:
top
,bottom
. Default position isbottom
. - onChange: Function to be called when the timezone selector changes.
- onHourFormatChange: Function to be called when the time format changes.
- isTimeFormatSwitchVisible: Setting this to false will hide the time format toggle. The default value is true.
- 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 [email protected]:bigbinary/neeto-time-zones.git
cd neeto-timezones/js
yarn install
yarn dev
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.