react-timezone-map-select v1.2.25

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

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

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.