{"id":13422076,"url":"https://github.com/ndom91/react-timezone-select","last_synced_at":"2025-05-15T00:10:57.826Z","repository":{"id":37992319,"uuid":"214846308","full_name":"ndom91/react-timezone-select","owner":"ndom91","description":"🌐 An extremely usable and dynamic React timezone selector","archived":false,"fork":false,"pushed_at":"2025-02-12T13:17:57.000Z","size":5876,"stargazers_count":229,"open_issues_count":4,"forks_count":48,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T16:07:21.255Z","etag":null,"topics":["component","hacktoberfest","react","select","timezone","typescript"],"latest_commit_sha":null,"homepage":"https://ndom91.github.io/react-timezone-select/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ndom91.png","metadata":{"funding":{"github":["ndom91"]},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/funding.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-13T15:39:54.000Z","updated_at":"2025-03-08T10:54:48.000Z","dependencies_parsed_at":"2023-11-29T18:27:27.950Z","dependency_job_id":"72a9c571-2421-43b2-af4b-5fe53d1ae453","html_url":"https://github.com/ndom91/react-timezone-select","commit_stats":{"total_commits":211,"total_committers":15,"mean_commits":"14.066666666666666","dds":"0.17535545023696686","last_synced_commit":"ac24301981d2c07b3ba9e2c748482686c39ee62b"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndom91%2Freact-timezone-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndom91%2Freact-timezone-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndom91%2Freact-timezone-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndom91%2Freact-timezone-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndom91","download_url":"https://codeload.github.com/ndom91/react-timezone-select/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247517905,"owners_count":20951718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","hacktoberfest","react","select","timezone","typescript"],"created_at":"2024-07-30T23:00:36.565Z","updated_at":"2025-04-06T17:08:08.159Z","avatar_url":"https://github.com/ndom91.png","language":"TypeScript","readme":"# 🌐⌚ react-timezone-select\n\n[![npm](https://img.shields.io/npm/v/react-timezone-select?style=flat-square)](https://www.npmjs.com/package/react-timezone-select)\n[![NPM Downloads](https://img.shields.io/npm/dm/react-timezone-select?style=flat-square)](https://www.npmjs.com/package/react-timezone-select)\n[![Skypack](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg?style=flat-square)](https://skypack.dev/view/react-timezone-select)\n[![Test CI](https://flat.badgen.net/github/checks/ndom91/react-timezone-select/main?style=flat-square\u0026label=tests)](https://github.com/ndom91/react-timezone-select/actions?query=workflow%3A%22Tests+CI%22)\n[![MIT](https://flat.badgen.net/badge/license/MIT/blue?style=flat-square)](https://github.com/ndom91/react-timezone-select/blob/main/LICENSE)\n\nAnother react timezone select component, I know.. However this one has a few key benefits!\n\nWhile looking around for a good option, I had trouble finding a timezone select components which:\n\n1. Adjusted the choices automatically with Daylight Savings Time (DST)\n2. Didn't have a huge list of choices to scroll through when technically only 24 (ish) are necessary\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e ### Demo: [ndom91.github.io/react-timezone-select](https://ndom91.github.io/react-timezone-select/)\n\u003e\n\u003e This demo is also available in the `./examples` directory. Simply run `pnpm dev` in the root of the repository and the vite dev server will start, where you can then find the example app at [`localhost:3001`](http://localhost:3001).\n\n## 🏗️ Installing\n\n```bash\nnpm install react-timezone-select react-select\n```\n\n\u003e [!CAUTION]\n\u003e The package `react-select` is optional. It is unnecessary if you're only using [the hook](#-timezone-hook).\n\n## 🔭 Usage\n\n```tsx\nimport React, { useState } from \"react\"\nimport ReactDOM from \"react-dom\"\nimport TimezoneSelect, { type ITimezone } from \"react-timezone-select\"\n\nconst App = () =\u003e {\n  const [selectedTimezone, setSelectedTimezone] = useState\u003cITimezone\u003e(\n    Intl.DateTimeFormat().resolvedOptions().timeZone,\n  )\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003ch2\u003ereact-timezone-select\u003c/h2\u003e\n      \u003cblockquote\u003ePlease make a selection\u003c/blockquote\u003e\n      \u003cdiv className=\"select-wrapper\"\u003e\n        \u003cTimezoneSelect value={selectedTimezone} onChange={setSelectedTimezone} /\u003e\n      \u003c/div\u003e\n      \u003ch3\u003eOutput:\u003c/h3\u003e\n      \u003cdiv\n        style={{\n          backgroundColor: \"#ccc\",\n          padding: \"20px\",\n          margin: \"20px auto\",\n          borderRadius: \"5px\",\n          maxWidth: \"600px\",\n        }}\n      \u003e\n        \u003cpre\n          style={{\n            margin: \"0 20px\",\n            fontWeight: 500,\n            fontFamily: \"monospace\",\n          }}\n        \u003e\n          {JSON.stringify(selectedTimezone, null, 2)}\n        \u003c/pre\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nconst rootElement = document.getElementById(\"root\")\nReactDOM.render(\u003cApp /\u003e, rootElement)\n```\n\n## 🎨 Timezone Hook\n\nBy default, `react-timezone-select` uses [`react-select`](https://github.com/jedwatson/react-select) as underlying select component. If you'd like to bring your own select component, you can use the `useTimezoneSelect` hook instead of the `TimezoneSelect` component to render the timezones using your self-provided select component.\n\n```tsx\nimport { useTimezoneSelect, allTimezones } from \"react-timezone-select\"\n\nconst labelStyle = \"original\"\nconst timezones = {\n  ...allTimezones,\n  \"Europe/Berlin\": \"Frankfurt\",\n}\n\nconst customSelect = () =\u003e {\n  const { options, parseTimezone } = useTimezoneSelect({ labelStyle, timezones })\n\n  return (\n    \u003cselect onChange={(e) =\u003e onChange(parseTimezone(e.currentTarget.value))}\u003e\n      {options.map((option) =\u003e (\n        \u003coption value={option.value}\u003e{option.label}\u003c/option\u003e\n      ))}\n    \u003c/select\u003e\n  )\n}\n```\n\n## 🕹️ Props\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eNote\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003evalue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring | ITimezoneOption\u003cstring, string\u003e\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003eInitial/current Timezone\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eonBlur\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e() =\u003e void\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eonChange\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(timezone: ITimezoneOption) =\u003e void\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003elabelStyle\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e'original' | 'altName' | 'abbrev' | 'offsetHidden'\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e'original'\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edisplayValue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e'GMT' | 'UTC'\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e'GMT'\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePrefix for the label (i.e. \u003ccode\u003e\"(GMT+2:00)\"\u003c/code\u003e or \u003ccode\u003e\"(UTC+2:00)\"\u003c/code\u003e)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003etimezones\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eRecord\u003cstring,string\u003e\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eallTimezones\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ecurrentDatetime\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eDate | string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003eOverride datetime used to calculate timezone values (alternative to current datetime), useful for calculating different summer / winter times, etc.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Example `value`s:\n\n```ts\n// string\nvalue='America/Juneau'\n// ITimezoneOption; i.e. `onChange` return value\nvalue={{\n  value: 'America/Juneau'\n  label: '(GMT-8:00) Alaska,\n  abbrev: 'AHST',\n  offset: -8,\n  altName: 'Alaskan Standard Time'\n}}\n```\n\n#### Example `timezones`:\n\n```ts\ntimezones={{\n  ...allTimezones,\n  'America/Lima': 'Pittsburgh',\n  'Europe/Berlin': 'Frankfurt',\n}}\n```\n\n## ✨ Tips\n\n### 👤 Default Users Timezone\n\nIf you'd like the user's own timezone to be set as the initially selected option on render, we can make use of the new `Intl` browser API by setting the default state value to `Intl.DateTimeFormat().resolvedOptions().timeZone`.\n\n```tsx\nconst [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone)\n```\n\n### 🕒 Custom Timezones\n\nYou can append custom choices of your own, or fully replace the listed timezone options.\n\nThe `timezones` prop takes a dictionary of timezones in the format of \"`{ tzIdentifier: Label }`\" ([Timezone Identifiers](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)). \n\n```tsx\nimport TimezoneSelect, { type ITimezone, allTimezones } from 'react-timezone-select'\n\nconst [selectedTimezone, setSelectedTimezone] = useState\u003cITimezone\u003e('Europe/Berlin')\n\n\u003cTimezoneSelect\n  value={selectedTimezone}\n  onChange={setSelectedTimezone}\n  timezones={{\n    ...allTimezones,\n    'America/Lima': 'Pittsburgh',\n    'Europe/Berlin': 'Frankfurt',\n  }}\n/\u003e\n```\n\nThe example above will include all original timezones and generate two additional choices:\n\n- `'(GMT-5:00) Pittsburgh'`\n- `'(GMT+1:00) Frankfurt'`\n\nWe'll prepend the correct `(GMT...)` part to the generated label, you just have to provide the string you want in your label. Also, you can omit spreading in the `allTimezones` object for a select dropdown consisting of only your custom choices.\n\n## 🚧 Contributing\n\nPull requests are always welcome! Please stick to repo formatting/linting settings, and if adding new features, please consider adding test(s) and documentation where appropriate!\n\n## 🙏 Thanks\n\n- [All Contributors](https://github.com/ndom91/react-timezone-select/graphs/contributors)\n- [Carlos Matallin](https://github.com/matallo/)\n- [spacetime](https://github.com/spencermountain/spacetime)\n- [react-select](https://react-select.com)\n\n## 📝 License\n\nMIT\n","funding_links":["https://github.com/sponsors/ndom91"],"categories":["UI Components","Input Components"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndom91%2Freact-timezone-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndom91%2Freact-timezone-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndom91%2Freact-timezone-select/lists"}