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.)
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
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>
);
}| 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). |
function convertOffsetInMinutesToString(offsetInMinutes: number): stringConvert 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"
function findTimeZone(timeZoneName: string): RawTimeZone | undefinedFind 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.
react-timezone-map-select is available under the MIT License.