Update to React v18 and change root render

Update packages

Author: coolusaHD

.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": "3.0.0",
   "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": "^18.0.0",
+    "@types/react-dom": "^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": "^18.0.0",
+    "react-dom": "^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": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "react-lottie-player": "^1.4.1"
+    "react-lottie-player": "^1.4.3"
   },
   "husky": {
     "hooks": {

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,7 +1,7 @@
-import { defineConfig } from "vite";
-import reactRefresh from "@vitejs/plugin-react-refresh";
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react';
 // import typescript from "rollup-plugin-typescript2";
-import typescript from "@rollup/plugin-typescript";
+import typescript from '@rollup/plugin-typescript';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,27 +10,27 @@ export default defineConfig({
   build: {
     // Instruct Vite to bundle this project as a library
     lib: {
-      entry: "src/index.tsx",
-      name: "animated-dark-mode-toggle",
-      formats: ["cjs", "es"],
+      entry: 'src/index.tsx',
+      name: 'animated-dark-mode-toggle',
+      formats: ['cjs', 'es'],
       fileName: (format) => `index.${format}.js`,
     },
 
     rollupOptions: {
       // Don't bundle react or react-dom
-      external: ["react", "react-dom"],
+      external: ['react', 'react-dom'],
 
       output: {
         globals: {
           // Globally define React for UMD builds
-          react: "React",
+          react: 'React',
         },
       },
 
       plugins: [
         typescript({
           // Ensure declaration files are outputted to our dist directory
-          tsconfig: "./tsconfig.lib.json",
+          tsconfig: './tsconfig.lib.json',
         }),
       ],
     },