Improvement: Support React 18

Author: Amr Wagdy

.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",

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

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)

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>,
+);

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",