upgrade: React v17

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
         allow: ["warn", "error"],
       },
     ],
+    "react/react-in-jsx-scope": "off",
     "@typescript-eslint/camelcase": "off",
   },
 };

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F41B Bug Report"
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 # Bug Report

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F4A1 Feature Request"
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 # Feature Request

.github/ISSUE_TEMPLATE/question.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F914 Questions and Help"
 about: This issue tracker is not for questions. Please ask questions at https://stackoverflow.com/questions/tagged/react.
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 GitHub Issues are reserved for Bug reports and Feature requests. Support requests that are created as issues are likely to be closed. We want to make sure you are able to find the help you seek. Please take a look at the following resources.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -82,7 +82,6 @@ We also support asynchronous script loading. By doing so you need to pass the `i
 Now we can start to build our component. Check the [API](#api) out to learn more.
 
 ```js
-import React from "react";
 import usePlacesAutocomplete, {
   getGeocode,
   getLatLng,
@@ -164,7 +163,6 @@ const PlacesAutocomplete = () => {
 Easy right? This is the magic of the `usePlacesAutocomplete` ✨. I just show you how does it work via the minimal example. However you can build an UX rich autocomplete component, like [WAI-ARIA compliant](https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#autocomplete) and keyword interaction as my [demo](#live-demo) by checking the [code](https://github.com/wellyshen/use-places-autocomplete/blob/master/demo/App/index.tsx) or integrate this hook with the [combobox](https://reacttraining.com/reach-ui/combobox) of [Reach UI](https://reacttraining.com/reach-ui) to achieve that.
 
 ```js
-import React from "react";
 import usePlacesAutocomplete from "use-places-autocomplete";
 import {
   Combobox,
@@ -253,7 +251,6 @@ The search result of Google Maps Places API, which contains the following proper
 Set the `value` of the input element. Use case as below.
 
 ```js
-import React from "react";
 import usePlacesAutocomplete from "use-places-autocomplete";
 
 const PlacesAutocomplete = () => {
@@ -276,7 +273,6 @@ const PlacesAutocomplete = () => {
 In addition, the `setValue` method has an extra parameter, which can be used to disable hitting Google Maps Places API.
 
 ```js
-import React from "react";
 import usePlacesAutocomplete from "use-places-autocomplete";
 
 const PlacesAutocomplete = () => {
@@ -317,7 +313,6 @@ const PlacesAutocomplete = () => {
 Calling the method will clear and reset all the properties of the `suggestions` object to default. It's useful for dismissing the dropdown.
 
 ```js
-import React from "react";
 import usePlacesAutocomplete from "use-places-autocomplete";
 import useOnclickOutside from "react-cool-onclickoutside";
 
@@ -453,7 +448,6 @@ getGeocode(parameter)
 Retrieves a great deal of information about a particular place ID (`suggestion`).
 
 ```js
-import React from "react";
 import usePlacesAutocomplete, { getDetails } from "use-places-autocomplete";
 
 const PlacesAutocomplete = () => {

babel.config.json

@@ -6,13 +6,15 @@
         "loose": true
       }
     ],
-    "@babel/typescript",
-    "@babel/react"
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic", "importSource": "@emotion/react" }
+    ]
   ],
   "env": {
     "development": {
-      "presets": ["@emotion/babel-preset-css-prop"],
-      "plugins": ["@emotion"]
+      "plugins": ["@emotion/babel-plugin"]
     }
   }
 }

demo/App/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ChangeEvent, KeyboardEvent, useState } from "react";
+import { FC, ChangeEvent, KeyboardEvent, useState } from "react";
 import useOnclickOutside from "react-cool-onclickoutside";
 import { Global, css } from "@emotion/react";
 import normalize from "normalize.css";

demo/GitHubCorner/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { github, octo, octoArm } from "./styles";
 

demo/index.tsx

@@ -1,9 +1,9 @@
-import React, { StrictMode } from "react";
-import ReactDOM from "react-dom";
+import { StrictMode } from "react";
+import { render } from "react-dom";
 
 import App from "./App";
 
-ReactDOM.render(
+render(
   <StrictMode>
     <App />
   </StrictMode>,

package.json

@@ -73,51 +73,51 @@
     "**/*": "prettier -w -u"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.12.1",
-    "@emotion/babel-plugin": "^11.0.0",
-    "@emotion/babel-preset-css-prop": "^11.0.0",
-    "@emotion/react": "^11.0.0",
-    "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^16.0.0",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@emotion/babel-plugin": "^11.1.2",
+    "@emotion/react": "^11.1.2",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-html": "^0.2.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
-    "@rollup/plugin-url": "^5.0.1",
-    "@testing-library/react": "^11.1.2",
-    "@testing-library/react-hooks": "^3.4.2",
-    "@types/googlemaps": "^3.40.3",
-    "@types/jest": "^26.0.15",
+    "@rollup/plugin-url": "^6.0.0",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/react-hooks": "^3.7.0",
+    "@types/googlemaps": "^3.40.4",
+    "@types/jest": "^26.0.18",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "eslint": "^7.2.0",
-    "eslint-config-welly": "^1.8.0",
-    "husky": "^4.3.0",
+    "eslint-config-welly": "^1.8.6",
+    "husky": "^4.3.5",
     "jest": "^26.6.3",
-    "lint-staged": "^10.5.1",
+    "lint-staged": "^10.5.3",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.2",
-    "react": "^16.13.1",
+    "postcss": "^8.2.1",
+    "prettier": "^2.2.1",
+    "react": "^17.0.1",
     "react-cool-onclickoutside": "latest",
-    "react-dom": "^16.13.1",
-    "react-test-renderer": "^16.13.1",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.33.2",
+    "rollup": "^2.34.2",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "rollup-plugin-terser": "^7.0.2",
-    "stylelint": "^13.7.2",
+    "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.0.5"
+    "typescript": "^4.1.2"
   },
   "peerDependencies": {
     "react": ">= 16.8.0"

src/__tests__/getLatLng.ts

@@ -16,10 +16,9 @@ describe("getLatLng", () => {
     });
   });
 
-  it("should handle failure correctly", () => {
+  it("should handle failure correctly", () =>
     // @ts-expect-error
-    return getLatLng({}).catch((error) => {
+    getLatLng({}).catch((error) => {
       expect(error).toEqual(expect.any(Error));
-    });
-  });
+    }));
 });

src/__tests__/getZipCode.ts

@@ -7,35 +7,29 @@ describe("getZipCode", () => {
     types: ["postal_code"],
   };
 
-  it("should handle success with long name correctly", () => {
+  it("should handle success with long name correctly", () =>
     // @ts-expect-error
-    return getZipCode({ address_components: [zipCode] }).then(
-      (result: ZipCode) => {
-        expect(result).toEqual(zipCode.long_name);
-      }
-    );
-  });
+    getZipCode({ address_components: [zipCode] }).then((result: ZipCode) => {
+      expect(result).toEqual(zipCode.long_name);
+    }));
 
-  it("should handle success with short name correctly", () => {
+  it("should handle success with short name correctly", () =>
     // @ts-expect-error
-    return getZipCode({ address_components: [zipCode] }, true).then(
+    getZipCode({ address_components: [zipCode] }, true).then(
       (result: ZipCode) => {
         expect(result).toEqual(zipCode.short_name);
       }
-    );
-  });
+    ));
 
-  it("should handle success without result correctly", () => {
+  it("should handle success without result correctly", () =>
     // @ts-expect-error
-    return getZipCode({ address_components: [] }).then((result: ZipCode) => {
+    getZipCode({ address_components: [] }).then((result: ZipCode) => {
       expect(result).toBeNull();
-    });
-  });
+    }));
 
-  it("should handle failure correctly", () => {
+  it("should handle failure correctly", () =>
     // @ts-expect-error
-    return getZipCode({}).catch((error) => {
+    getZipCode({}).catch((error) => {
       expect(error).toEqual(expect.any(Error));
-    });
-  });
+    }));
 });

tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es2019",
     "module": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "jsx": "react",
+    "jsx": "react-jsx",
     // Specify module resolution strategy: "node" (Node.js) or "classic" (TypeScript pre-1.6)
     "moduleResolution": "node",
     // Ensure that Babel can safely transpile files in the TypeScript project