{"id":11885,"library":"react-timezone-select","title":"React Timezone Select Component and Hook","description":"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.","status":"active","version":"3.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/ndom91/react-timezone-select","tags":["javascript","react","timezone","select","react-select","typescript"],"install":[{"cmd":"npm install react-timezone-select","lang":"bash","label":"npm"},{"cmd":"yarn add react-timezone-select","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-timezone-select","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core runtime dependency for any React component.","package":"react","optional":false},{"reason":"Required for rendering React components in a browser environment.","package":"react-dom","optional":false},{"reason":"Core dependency for the default `TimezoneSelect` component. This package is optional if you only use the `useTimezoneSelect` hook to provide your own select component.","package":"react-select","optional":true}],"imports":[{"note":"This is the primary default export for the pre-built component. The package became ESM-only since v3.1.0.","wrong":"import { TimezoneSelect } from 'react-timezone-select';\nconst TimezoneSelect = require('react-timezone-select');","symbol":"TimezoneSelect","correct":"import TimezoneSelect from 'react-timezone-select';"},{"note":"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.","wrong":"import { ITimezone } from 'react-timezone-select';","symbol":"ITimezone","correct":"import type { ITimezone } from 'react-timezone-select';"},{"note":"This is a named export providing the logic for building custom timezone select components. The package became ESM-only since v3.1.0.","wrong":"import useTimezoneSelect from 'react-timezone-select';\nconst { useTimezoneSelect } = require('react-timezone-select');","symbol":"useTimezoneSelect","correct":"import { useTimezoneSelect } from 'react-timezone-select';"},{"note":"A named export providing a pre-compiled list of all timezones, useful when customizing options with `useTimezoneSelect`.","wrong":"import allTimezones from 'react-timezone-select';","symbol":"allTimezones","correct":"import { allTimezones } from 'react-timezone-select';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport TimezoneSelect, { type ITimezone } from 'react-timezone-select';\n\nconst App = () => {\n const [selectedTimezone, setSelectedTimezone] = useState(\n Intl.DateTimeFormat().resolvedOptions().timeZone,\n );\n\n return (\n
\n

react-timezone-select

\n
Please make a selection
\n
\n \n
\n

Output:

\n \n \n {JSON.stringify(selectedTimezone, null, 2)}\n \n
\n \n );\n};\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n ReactDOM.createRoot(rootElement).render();\n} else {\n console.error('Root element not found');\n}\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The package transitioned to ESM-only (ES Modules) distribution. CommonJS `require()` statements will no longer work directly.","severity":"breaking","affected_versions":">=3.1.0"},{"fix":"Remove the `maxAbbrLength` prop from your `TimezoneSelect` component usage. The component now handles abbreviation lengths internally.","message":"The `maxAbbrLength` prop was removed, which controlled the maximum length of timezone abbreviations displayed.","severity":"breaking","affected_versions":">=3.0.2"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"When 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.","severity":"gotcha","affected_versions":">=3.2.1"},{"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`.","message":"Passing `null` as the `value` prop could cause crashes in versions prior to v3.2.7 for certain scenarios.","severity":"gotcha","affected_versions":"<3.2.7"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Switch to ES Module `import` syntax: `import TimezoneSelect from 'react-timezone-select';`. Ensure your environment (Node.js, bundler) is configured for ESM.","cause":"Attempting to use CommonJS `require()` syntax to import `react-timezone-select` after it transitioned to ESM-only.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-timezone-select/dist/index.mjs not supported."},{"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.","cause":"The `react-select` peer dependency is not installed, or there's an issue with its version compatibility.","error":"TypeError: Cannot read properties of undefined (reading 'label') or 'value' for TimezoneSelect component."},{"fix":"Remove the `maxAbbrLength` prop from your `TimezoneSelect` component usage. This prop is no longer supported.","cause":"Using the deprecated `maxAbbrLength` prop after it was removed in version 3.0.2.","error":"Property 'maxAbbrLength' does not exist on type 'IntrinsicAttributes & ITimezoneSelectProps'."},{"fix":"Use a default import: `import TimezoneSelect from 'react-timezone-select';`.","cause":"Incorrect import syntax: trying to destructure a named import `{ TimezoneSelect }` when it is a default export.","error":"TypeError: TimezoneSelect is not a function or TimezoneSelect is undefined."}],"ecosystem":"npm"}