react-timezone-map-select

react-timezone-map-select

Features

This is a react component which lets you select a timezone on world map in a modal dialog.

• Modal dialog is implemented using MUI (a.k.a. material UI) ver 5.x.
• You can select a timezone from the list of country / city.
• You can also select a country / city on the world map.
• It is fully customizable to make it fit to your application's look and feel.
  • All text labels
  • Button design (you can specify your own react component)
  • Order of buttons. (Mac style: OK comes last. Windows style: OK comes first.)

Installation

react-timezone-map-select is available as an npm package.

To install and save in your package.json dependencies, run:

// with npm
npm install react-timezone-map-select

// with yarn
yarn add react-timezone-map-select

Usage

You can use TimeZoneSelectDialog in the same manner as modal dialog in MUI.

import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import React, { ReactElement } from 'react';
import { TimeZoneSelectDialog } from 'react-timezone-map-select';


function App(): ReactElement {
  /** Timezone name */
  const [timezoneName, setTimezoneName] = React.useState('America/Los_Angeles');

  /** Set true when you open TimeZoneSelectDialog. */
  const [open, setOpen] = React.useState(false);

  /** Called when you press "Open Dialog" button. */
  const handleOpen = React.useCallback(() => {
    setOpen(true);
  }, []);

  /** Called when TimeZoneSelectDialog is closed. */
  const handleClose = React.useCallback((newTimeZoneName: string) => {
    setTimezoneName(newTimeZoneName);
    setOpen(false);
  }, []);

  return (
    <Container>
      <Box>
        <p>Timezone = {timezoneName}</p>
      </Box>
      <Box>
        <Button onClick={handleOpen} variant="contained" >
          Open Dialog
        </Button>
      </Box>
      <TimeZoneSelectDialog
        open={open}
        timeZoneName={timezoneName}
        onClose={handleClose}
      />
    </Container>
  );
}

Examples

Simple demo

• Live demo
• Source code

Customize demo

• Live demo
• Source code

Properties and Functions

TimeZoneSelectDialog

Property name	Type	Default Value	Description
open	boolean	false	If true, the modal dialog is shown.
onClose	(newTZ:string) => void	undefined	Callback fired when the modal dialog is to be closed.
timezoneName	string	"America/Los_Angeles"	Initial timezone name.
title	string	"Time Zone"	Title string.
description	string	"Select a time zone in the list or click an area on the map."	Description string.
buttonLabelOk	string	"OK"	Label on "ok" button.
buttonLabelCancel	string	"Cancel"	Label on "cancel" button.
SubstituteButtonOk	((props: ButtonProps) => ReactElement) | string;	@mui/material/Button	React component to be used as "ok" button.
SubstituteButtonCancel	((props: ButtonProps) => ReactElement) | string;	@mui/material/Button	React component to be used as "cancel" button.
isOkFirstButton	boolean	false	If true, "ok" button comes first (Windows style). Otherwise, "cancel" button comes first (Mac style).

convertOffsetInMinutesToString

function convertOffsetInMinutesToString(offsetInMinutes: number): string

Convert time offset to user friendly string. e.g. -60 ==> "-01:00"

Parameters

Parameter	Type	Description
offsetInMinutes	number	offset from UTC in minutes.

Return value

User friendly string e.g. "-01:00"

findTimeZone

function findTimeZone(timeZoneName: string): RawTimeZone | undefined

Find a time zone data in @vvo/tzdb.

Parameters

Parameter	Type	Description
timeZoneName	string	Time zone name. Note it could be grouped in "group".

Return value

Time zone data in @vvo/tzdb if found. undefined if not found.

License

react-timezone-map-select is available under the MIT License.