react-timezone-select
Advanced tools
react-timezone-select - npm Package Compare versions
Comparing version 1.5.5 to 1.5.6
| { | ||
| "name": "react-timezone-select", | ||
| "version": "1.5.5", | ||
| "version": "1.5.6", | ||
| "description": "Usable, dynamic React Timezone Select", | ||
| "scripts": { | ||
| "dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && npm run dev\"", | ||
| "dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && pnpm dev\"", | ||
| "prepublishOnly": "pnpm run build", | ||
@@ -8,0 +8,0 @@ "postpublish": "pnpm run build:example && npm run deploy", |
@@ -19,3 +19,3 @@ # 🌐⌚ react-timezone-select | ||
| > This demo is also available in the `./examples` directory. Simply run `npm run dev` in the root of the repository after installing everything in the examples subdirectory and snowpack dev will begin, where you can find the demo at [`localhost:8080`](http://localhost:8080). | ||
| > 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). | ||
@@ -38,3 +38,5 @@ We also have some **more examples** available on Codesandbox using this component with the datetime library `spacetime` ([example](https://codesandbox.io/s/react-timezone-select-usage-z37hf)) as well as with `moment` ([example](https://codesandbox.io/s/react-timezone-select-usage-moment-5n6vn)), as well as in Typescript using the new `Intl` browser API ([example](https://codesandbox.io/s/react-timezone-select-typescript-8lsv3?file=/src/App.tsx)) showing how one might use this component in a real application. | ||
| const App = () => { | ||
| const [selectedTimezone, setSelectedTimezone] = useState({}) | ||
| const [selectedTimezone, setSelectedTimezone] =useState( | ||
| Intl.DateTimeFormat().resolvedOptions().timeZone | ||
| ) | ||
@@ -91,19 +93,4 @@ return ( | ||
| Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25)! | ||
| Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25) | ||
| ### ⚠ Next.js Users | ||
| **Update**: Starting with `v1.3.0` you DO NOT need `next-transpile-modules` to use this library with Next.js anymore! | ||
| For now, Next.js isn't great about handling ESM packages. Until this gets fixed, there is a workaround for using this and other ESM packages via [`next-transpile-modules`](https://www.npmjs.com/package/next-transpile-modules). | ||
| ```js | ||
| // next.config.js | ||
| const withTM = require('next-transpile-modules')(['react-timezone-select']) | ||
| module.exports = withTM({ | ||
| // ...further Next.js config | ||
| }) | ||
| ``` | ||
| ### 🕒 Custom Timezones | ||
@@ -117,3 +104,3 @@ | ||
| import TimezoneSelect, { allTimezones } from 'react-timezone-select' | ||
| ;<TimezoneSelect | ||
| <TimezoneSelect | ||
| value={selectedTimezone} | ||
@@ -133,17 +120,25 @@ onChange={setSelectedTimezone} | ||
| - `value` - Initial Timezone `string`, i.e. `'Europe/Amsterdam'` or the full object from the onChange function: `{ value: string, label: string, abbrev: string, altName: string }` | ||
| - `value` - `string | Object` - Initial/current Timezone. | ||
| ``` | ||
| 'America/Juneau' | { | ||
| value: 'America/Juneau' | ||
| label: '(GMT-8:00) Alaska, | ||
| abbrev: 'AHST', | ||
| offset: -8, | ||
| altName: 'Alaskan Standard Time' | ||
| } | ||
| ``` | ||
| - `onBlur` - `() => void` | ||
| - `onChange` - `(timezone) => void` | ||
| - Example `timezone` parameter: | ||
| ``` | ||
| { | ||
| value: 'America/Juneau' | ||
| label: '(GMT-8:00) Alaska, | ||
| abbrev: 'AHST', | ||
| offset: -8, | ||
| altName: 'Alaskan Standard Time' | ||
| } | ||
| ``` | ||
| - `labelStyle` - `'original' | 'altName' | 'abbrev'` | ||
| - `timezones` - Custom Timezone Object | ||
| - `timezones` - `Record<string,string>` | ||
| ``` | ||
| timezones={{ | ||
| ...allTimezones, | ||
| 'America/Lima': 'Pittsburgh', | ||
| 'Europe/Berlin': 'Frankfurt', | ||
| }} | ||
| ``` | ||
| - `maxAbbrLength` - `number` - Truncate `abbrev` labelStyles string to length | ||
| - Any other [`react-select`](https://github.com/jedwatson/react-select#props) props | ||
@@ -153,3 +148,3 @@ | ||
| Pull requests are always welcome! Please stick to the `prettier` settings, and if adding new features, please consider adding test(s) and documentation where appropriate! | ||
| Pull requests are always welcome! Please stick to repo settings (prettier, eslint, etc.), and if adding new features, please consider adding test(s) and documentation where appropriate! | ||
@@ -156,0 +151,0 @@ ## 🙏 Thanks |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.83%
26273
- Number of lines in readme file
- decreased by-3.21%
151