fix: Add React 16 support

.babelrc

@@ -8,9 +8,7 @@
       "modules": false,
       "bugfixes": true
     }],
-    ["@babel/preset-react", {
-      "runtime": "automatic"
-    }],
+    ["@babel/preset-react"],
     ["@babel/preset-typescript", {
       "isTSX": true,
       "allExtensions": true

.eslintrc

@@ -46,9 +46,6 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/explicit-function-return-type": "error",
     "@typescript-eslint/no-unused-expressions": "error",
-    "prettier/prettier": "error",
-    "react/display-name": "off",
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off"
+    "prettier/prettier": "error"
   }
 }

demo/index.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+import React, { StrictMode } from "react";
 import { render } from "react-dom";
 import { ColorPicker, useColor } from "../src";
 import "../src/css/styles.css";

package.json

@@ -60,7 +60,7 @@
     "test": "yarn test:lint && yarn test:typescript",
     "build:js": "rollup --config rollup.config.ts",
     "build:types": "tsc --emitDeclarationOnly",
-    "prebuild": "del-cli lib",
+    "prebuild": "yarn test && del-cli lib",
     "build": "yarn build:js && yarn build:types",
     "predemo:build": "del-cli demo/build",
     "demo:build": "parcel build demo/index.html --dist-dir demo/build --target demo --public-url . --no-source-maps",
@@ -72,7 +72,7 @@
     "release": "git push --follow-tags origin master"
   },
   "peerDependencies": {
-    "react": "^17.0.1"
+    "react": ">=16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.16",

rollup.config.ts

@@ -23,7 +23,7 @@ const config = {
       format: "es",
     },
   ],
-  external: ["react", "react/jsx-runtime"],
+  external: ["react"],
   plugins: [
     nodeResolve({
       extensions,

src/components/ColorPicker.component.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ColorPickerProps } from "../interfaces/ColorPicker.interface";
 import { Saturation } from "./Saturation.component";
 import { Hue } from "./Hue.component";

src/components/Fields.component.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, useEffect } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { UpperFloorProps, LowerFloorProps, FieldsProps } from "../interfaces/Fields.interface";
 import { toHsv, toRgb } from "../utils/convert.util";
 import { toColor } from "../utils/toColor.util";

src/components/Hue.component.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { HueProps } from "../interfaces/Hue.interface";
 import { getHueCoordinates } from "../utils/coordinates.util";
 import { toColor } from "../utils/toColor.util";

src/components/Interactive.component.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { InteractiveProps } from "../interfaces/Interactive.interface";
 import { clamp } from "../utils/clamp.util";
 

src/components/Saturation.component.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { SaturationProps } from "../interfaces/Saturation.interface";
 import { getColorCoordinates } from "../utils/coordinates.util";
 import { toColor } from "../utils/toColor.util";

tsconfig.json

@@ -4,12 +4,8 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "outDir": "lib",
-    "jsx": "react-jsx",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "jsx": "react",
+    "lib": ["ESNext", "DOM"],
     "allowJs": true,
     "strict": true,
     "declaration": true,