Merge pull request #3 from coolusaHD/main

Add support for react 18

Author: todd-elvers

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn type-check && yarn test && yarn lint-staged

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dark-mode-toggle-2",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "An updated, cute dark mode toggle button for React.",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -38,7 +38,8 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "build": "yarn type-check && vite build",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn build",
+    "prepare": "husky install"
   },
   "repository": "",
   "author": "Todd Elvers <todd.elvers+github@gmail.com>",
@@ -48,40 +49,40 @@
     "lottie-web": "5.7.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@emotion/css": "^11.5.0",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/react": "^6.3.12",
-    "@types/jest": "^27.0.2",
-    "@types/react": "^16.14.11 || ^17.0.0",
-    "@types/react-dom": "^16.9.14 || ^17.0.0",
-    "@vitejs/plugin-react-refresh": "^1.3.1",
-    "babel-loader": "^8.2.3",
-    "husky": "^4.3.8",
-    "jest": "^27.3.1",
-    "lint-staged": "^11.2.5",
-    "lottie-web": "^5.7.14",
-    "prettier": "^2.4.1",
-    "react": "^16.14.0 || ^17.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0",
+    "@babel/core": "^7.18.6",
+    "@emotion/css": "^11.9.0",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@types/jest": "^28.1.5",
+    "@types/react": "^16.14.11 || ^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^16.9.14 || ^17.0.0 || ^18.0.0",
+    "@vitejs/plugin-react": "^2.0.0",
+    "babel-loader": "^8.2.5",
+    "husky": "^8.0.0",
+    "jest": "^28.1.3",
+    "lint-staged": "^13.0.3",
+    "lottie-web": "^5.9.6",
+    "prettier": "^2.7.1",
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.58.3",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "ts-jest": "^27.0.7",
-    "ts-loader": "^9.2.6",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.4.4",
-    "vite": "^2.6.13"
+    "rollup": "^2.76.0",
+    "rollup-plugin-typescript2": "^0.32.1",
+    "ts-jest": "^28.0.5",
+    "ts-loader": "^9.3.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^16.14.0 || ^17.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0"
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "react-lottie-player": "^1.4.1"
+    "react-lottie-player": "^1.4.3"
   },
   "husky": {
     "hooks": {
@@ -93,4 +94,4 @@
       "prettier --write"
     ]
   }
-}
+}

src/main.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import { createRoot } from "react-dom/client";
 import { DarkModeToggle } from "./index";
 
 const ControlledDarkModeToggle = () => {
@@ -24,9 +24,10 @@ const ControlledDarkModeToggle = () => {
   );
 };
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
   <React.StrictMode>
     <ControlledDarkModeToggle />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );

vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import reactRefresh from "@vitejs/plugin-react-refresh";
+import reactRefresh from "@vitejs/plugin-react";
 // import typescript from "rollup-plugin-typescript2";
 import typescript from "@rollup/plugin-typescript";