{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-timezone-select"],"cli":null},"imports":["import TimezoneSelect from 'react-timezone-select';","import type { ITimezone } from 'react-timezone-select';","import { useTimezoneSelect } from 'react-timezone-select';","import { allTimezones } from 'react-timezone-select';"],"auth":{"required":false,"env_vars":[]},"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<ITimezone | string>(\n    Intl.DateTimeFormat().resolvedOptions().timeZone,\n  );\n\n  return (\n    <div className=\"App\">\n      <h2>react-timezone-select</h2>\n      <blockquote>Please make a selection</blockquote>\n      <div style={{ maxWidth: '600px', margin: '20px auto' }}>\n        <TimezoneSelect value={selectedTimezone} onChange={setSelectedTimezone} />\n      </div>\n      <h3>Output:</h3>\n      <div\n        style={{\n          backgroundColor: '#ccc',\n          padding: '20px',\n          margin: '20px auto',\n          borderRadius: '5px',\n          maxWidth: '600px',\n        }}\n      >\n        <pre\n          style={{\n            margin: '0 20px',\n            fontWeight: 500,\n            fontFamily: 'monospace',\n          }}\n        >\n          {JSON.stringify(selectedTimezone, null, 2)}\n        </pre>\n      </div>\n    </div>\n  );\n};\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  ReactDOM.createRoot(rootElement).render(<App />);\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}