Improvement: Support React 18

scaleflex · Aug 4, 2022 · b074da5 · b074da5
1 parent c7f59e7
commit b074da5
Show file tree

Hide file tree

Showing 6 changed files with 6,972 additions and 24 deletions.
diff --git a/.babelrc b/.babelrc
@@ -3,18 +3,15 @@
     [
       "@babel/preset-env"
     ],
-    ["@babel/preset-react", {"runtime": "automatic"}]
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-syntax-import-meta",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-json-strings",
     [
-      "@babel/plugin-proposal-decorators",
-      {
-        "legacy": true
-      }
+      "@babel/plugin-proposal-decorators",{ "legacy": true }
     ],
     "@babel/plugin-proposal-function-sent",
     "@babel/plugin-proposal-export-namespace-from",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,7 +14,7 @@ Types of changes:
 
 > Date format: YYYY-MM-DD
 
-> If we have some "Breaking changes" we can mark it in message by `**BREAKING**` preffix, like:  
+> If we have some "Breaking changes" we can mark it in message by `**BREAKING**` preffix, like:
 > `- **BREAKING**: Some message`
 
 -------------
@@ -27,6 +27,13 @@ Types of changes:
 -------------
 
 -------------
+## 3.6.3 - 2022-04-29
+### Changed
+- Support React 18
+
+### Fixed
+- Removed deprecated methods
+
 ## 3.6.2 - 2022-04-29
 ### Fixed
 - Low preview image width

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v3.6.2-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
+[![Release](https://img.shields.io/github/v/release/scaleflex/react-cloudimage-responsive)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
 [![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

diff --git a/examples/src/index.js b/examples/src/index.js
@@ -1,4 +1,4 @@
-import { render } from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { CloudimageProvider } from '../../src';
 import './style.css';
 import App from './components/app';
@@ -16,12 +16,10 @@ const cloudimageConfig = {
   },
 };
 
-function Start() {
-  return (
-    <CloudimageProvider config={cloudimageConfig}>
-      <App />
-    </CloudimageProvider>
-  );
-}
+const root = ReactDOM.createRoot(document.getElementById('app'));
 
-render(<Start />, document.getElementById('app'));
+root.render(
+  <CloudimageProvider config={cloudimageConfig}>
+    <App />
+  </CloudimageProvider>,
+);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-cloudimage-responsive",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "main": "dist/index.js",
   "description": "Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load.",
   "author": "scaleflex",
@@ -42,14 +42,9 @@
   "dependencies": {
     "cloudimage-responsive-utils": "^2.4.9",
     "core-js": "^3.15.2",
-    "prop-types": "^15.8.1",
     "react-lazyload": "^3.2.0",
     "throttle-debounce": "^3.0.1"
   },
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
   "devDependencies": {
     "@babel/cli": "^7.14.5",
     "@babel/core": "^7.14.6",
@@ -74,8 +69,8 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^10.2.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.46.0",