Registry / web-framework / react-timezone-select

react-timezone-select

library3.3.3jsnpmunverified

react-timezone-select is a React component and hook designed to provide a usable and dynamic timezone selection interface. It uniquely addresses common challenges by automatically adjusting displayed choices for Daylight Savings Time (DST) and presenting a concise list of options through intelligent deduplication. The package is currently at version 3.3.3, indicating active development with frequent patch and minor updates. A key differentiator is its flexibility: developers can either use the pre-built `TimezoneSelect` component, which integrates with `react-select`, or leverage the `useTimezoneSelect` hook to integrate timezone selection logic with their own custom select components. It ships with comprehensive TypeScript types, ensuring a robust developer experience.

web-framework

npm install react-timezone-select

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TIMEZONE-SEL

react-timezone-select

web-frameworkjavascriptv3.3.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

TimezoneSelect

✓ import TimezoneSelect from 'react-timezone-select';

✗ import { TimezoneSelect } from 'react-timezone-select'; const TimezoneSelect = require('react-timezone-select');

This is the primary default export for the pre-built component. The package became ESM-only since v3.1.0.

ITimezone

✓ import type { ITimezone } from 'react-timezone-select';

✗ import { ITimezone } from 'react-timezone-select';

ITimezone is a TypeScript type export, used for typing the selected timezone object. It should be imported using `import type` for clarity and bundler optimization.

useTimezoneSelect

✓ import { useTimezoneSelect } from 'react-timezone-select';

✗ import useTimezoneSelect from 'react-timezone-select'; const { useTimezoneSelect } = require('react-timezone-select');

This is a named export providing the logic for building custom timezone select components. The package became ESM-only since v3.1.0.

allTimezones

✓ import { allTimezones } from 'react-timezone-select';

✗ import allTimezones from 'react-timezone-select';

A named export providing a pre-compiled list of all timezones, useful when customizing options with `useTimezoneSelect`.

This example demonstrates how to integrate the `TimezoneSelect` component into a React application, manage its selected value using React state, and display the resulting timezone object.

import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import TimezoneSelect, { type ITimezone } from 'react-timezone-select'; const App = () => { const [selectedTimezone, setSelectedTimezone] = useState<ITimezone | string>( Intl.DateTimeFormat().resolvedOptions().timeZone, ); return ( <div className="App"> <h2>react-timezone-select</h2> <blockquote>Please make a selection</blockquote> <div style={{ maxWidth: '600px', margin: '20px auto' }}> <TimezoneSelect value={selectedTimezone} onChange={setSelectedTimezone} /> </div> <h3>Output:</h3> <div style={{ backgroundColor: '#ccc', padding: '20px', margin: '20px auto', borderRadius: '5px', maxWidth: '600px', }} > <pre style={{ margin: '0 20px', fontWeight: 500, fontFamily: 'monospace', }} > {JSON.stringify(selectedTimezone, null, 2)} </pre> </div> </div> ); }; const rootElement = document.getElementById('root'); if (rootElement) { ReactDOM.createRoot(rootElement).render(<App />); } else { console.error('Root element not found'); }

Debug

Known issues

breakingThe package transitioned to ESM-only (ES Modules) distribution. CommonJS `require()` statements will no longer work directly.

fix

Migrate your project to use ES Modules `import` syntax. If using Node.js, ensure your package.json specifies `"type": "module"` or use `.mjs` file extensions. For bundlers, verify your configuration supports ESM.

affects: >=3.1.0

breakingThe `maxAbbrLength` prop was removed, which controlled the maximum length of timezone abbreviations displayed.

fix

Remove the `maxAbbrLength` prop from your `TimezoneSelect` component usage. The component now handles abbreviation lengths internally.

affects: >=3.0.2

gotchaThe `TimezoneSelect` component relies on `react-select` as a peer dependency, which must be installed separately. If `react-select` is not installed, the `TimezoneSelect` component will not function.

fix

Install `react-select` via npm or yarn: `npm install react-select` or `yarn add react-select`. If you wish to avoid this dependency, use the `useTimezoneSelect` hook with a custom select component.

affects: >=1.0.0

gotchaWhen using this component in applications with React Server Components (RSC), it is crucial to ensure the client directive `"use client";` is correctly applied to the component or its parent to prevent rendering errors.

fix

Ensure `"use client";` is present at the top of the file where `TimezoneSelect` is used, or in a parent component that orchestrates client-side interactions.

affects: >=3.2.1

gotchaPassing `null` as the `value` prop could cause crashes in versions prior to v3.2.7 for certain scenarios.

fix

Update to version 3.2.7 or newer. If upgrading is not possible, ensure that the `value` prop is always a valid `string | ITimezone` and never `null`.

affects: <3.2.7

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-timezone-select/dist/index.mjs not supported.

Attempting to use CommonJS `require()` syntax to import `react-timezone-select` after it transitioned to ESM-only.

fix

Switch to ES Module `import` syntax: `import TimezoneSelect from 'react-timezone-select';`. Ensure your environment (Node.js, bundler) is configured for ESM.

TypeError: Cannot read properties of undefined (reading 'label') or 'value' for TimezoneSelect component.

The `react-select` peer dependency is not installed, or there's an issue with its version compatibility.

fix

Verify `react-select` is installed (`npm install react-select`) and that its version (`^5.9.0`) is compatible with `react-timezone-select`. Check for other `react-select` related warnings in the console.

Property 'maxAbbrLength' does not exist on type 'IntrinsicAttributes & ITimezoneSelectProps'.

Using the deprecated `maxAbbrLength` prop after it was removed in version 3.0.2.

fix

Remove the `maxAbbrLength` prop from your `TimezoneSelect` component usage. This prop is no longer supported.

TypeError: TimezoneSelect is not a function or TimezoneSelect is undefined.

Incorrect import syntax: trying to destructure a named import `{ TimezoneSelect }` when it is a default export.

fix

Use a default import: `import TimezoneSelect from 'react-timezone-select';`.

Upgrade

Version history

3.3.3latest on npm

Audit

Dependencies

reactrequiredCore runtime dependency for any React component.

react-domrequiredRequired for rendering React components in a browser environment.

react-selectoptionalCore dependency for the default `TimezoneSelect` component. This package is optional if you only use the `useTimezoneSelect` hook to provide your own select component.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/ndom91/react-timezone-select ↗

packagehttps://www.npmjs.com/package/react-timezone-select ↗