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.

1import Box from '@mui/material/Box';
2import Button from '@mui/material/Button';
3import Container from '@mui/material/Container';
4import React, { ReactElement } from 'react';
5import { TimeZoneSelectDialog } from 'react-timezone-map-select';
6
7
8function App(): ReactElement {
9  /** Timezone name */
10  const [timezoneName, setTimezoneName] = React.useState('America/Los_Angeles');
11
12  /** Set true when you open TimeZoneSelectDialog. */
13  const [open, setOpen] = React.useState(false);
14
15  /** Called when you press "Open Dialog" button. */
16  const handleOpen = React.useCallback(() => {
17    setOpen(true);
18  }, []);
19
20  /** Called when TimeZoneSelectDialog is closed. */
21  const handleClose = React.useCallback((newTimeZoneName: string) => {
22    setTimezoneName(newTimeZoneName);
23    setOpen(false);
24  }, []);
25
26  return (
27    <Container>
28      <Box>
29        <p>Timezone = {timezoneName}</p>
30      </Box>
31      <Box>
32        <Button onClick={handleOpen} variant="contained" >
33          Open Dialog
34        </Button>
35      </Box>
36      <TimeZoneSelectDialog
37        open={open}
38        timeZoneName={timezoneName}
39        onClose={handleClose}
40      />
41    </Container>
42  );
43}

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

1function 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

1function 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.