react-timezone-select 1.2.3-experimental.7 → 1.3.1

package/README.md

@@ -16,7 +16,7 @@ While looking around for a good option, I had trouble finding a timezone select
 
 #### Demo: [ndom91.github.io/react-timezone-select](https://ndom91.github.io/react-timezone-select/)
 
-> This demo is also available in the `./examples` directory. Simply run `npm start` 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 `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).
 
 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.
 
@@ -29,9 +29,9 @@ npm install react-timezone-select
 ## 🔭 Usage
 
 ```jsx
-import React, { useState } from "react"
-import ReactDOM from "react-dom"
-import TimezoneSelect from "react-timezone-select"
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+import TimezoneSelect from 'react-timezone-select'
 
 const App = () => {
   const [selectedTimezone, setSelectedTimezone] = useState({})
@@ -49,18 +49,18 @@ const App = () => {
       <h3>Output:</h3>
       <div
         style={{
-          backgroundColor: "#ccc",
-          padding: "20px",
-          margin: "20px auto",
-          borderRadius: "5px",
-          maxWidth: "600px",
+          backgroundColor: '#ccc',
+          padding: '20px',
+          margin: '20px auto',
+          borderRadius: '5px',
+          maxWidth: '600px',
         }}
       >
         <pre
           style={{
-            margin: "0 20px",
+            margin: '0 20px',
             fontWeight: 500,
-            fontFamily: "monospace",
+            fontFamily: 'monospace',
           }}
         >
           {JSON.stringify(selectedTimezone, null, 2)}
@@ -70,7 +70,7 @@ const App = () => {
   )
 }
 
-const rootElement = document.getElementById("root")
+const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -90,19 +90,19 @@ 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"])
+const withTM = require('next-transpile-modules')(['react-timezone-select'])
 
 module.exports = withTM({
   // ...further Next.js config
 })
 ```
 
-**Update**: Next.js 12 now supports ESM packages by default. If you have any problems with this package in a Next.js 12 project, please let me know!
-
 ### 🕒 Custom Timezones
 
 You can append custom choices of your own, or fully replace the listed timezone options.
@@ -110,14 +110,14 @@ You can append custom choices of your own, or fully replace the listed timezone
 The `timezones` prop takes a dictionary of timezones. Don't worry, we'll prepend the `(GMT...)` part, you just have to pass the city(s) or region(s) you want in your label.
 
 ```jsx
-import TimezoneSelect, { allTimezones } from "react-timezone-select"
+import TimezoneSelect, { allTimezones } from 'react-timezone-select'
 ;<TimezoneSelect
   value={selectedTimezone}
   onChange={setSelectedTimezone}
   timezones={{
     ...allTimezones,
-    "America/Lima": "Pittsburgh",
-    "Europe/Berlin": "Frankfurt",
+    'America/Lima': 'Pittsburgh',
+    'Europe/Berlin': 'Frankfurt',
   }}
 />
 ```