Merge pull request #2 from scaleflex/Improve-refactor-to-support-React-18-T9926

Improve: Refactoring & Upgrade to React18 - T9926

Author: amrw-js

.babelrc

@@ -3,7 +3,7 @@
     [
       "@babel/preset-env"
     ],
-    "@babel/preset-react"
+    ["@babel/preset-react", {"runtime": "automatic"}]
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",

.eslintrc.json

@@ -0,0 +1,118 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "airbnb"
+    ],
+    "overrides": [
+    ],
+    "ignorePatterns": ["webpack-demo.config.js", "**/vendor/*.js"],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+      "no-useless-escape": "off",
+      "linebreak-style": 0,
+      "no-debugger":"off",
+      "jsx-quotes": [
+        "error",
+        "prefer-double"
+      ],
+      "max-lines": [
+        "warn",
+        {
+          "max": 1250,
+          "skipBlankLines": true,
+          "skipComments": true
+        }
+      ],
+      "max-len": [
+        "warn",
+        {
+          "code": 1120,
+          "tabWidth": 4,
+          "ignoreComments": true,
+          "ignoreTrailingComments": true,
+          "ignoreUrls": true
+        }
+      ],
+      "no-param-reassign": 0,
+      "no-multiple-empty-lines": [
+        "error",
+        {
+          "max": 2,
+          "maxEOF": 0
+        }
+      ],
+      "no-use-before-define": [
+        "error",
+        {
+          "functions": false
+        }
+      ],
+      "no-unused-vars": "warn",
+      "react/function-component-definition": [
+        "error",
+        {
+          "namedComponents": "function-declaration"
+        }
+      ],
+      "react/jsx-key": "error",
+      "react/require-default-props": "off",
+      "no-underscore-dangle": "off",
+      "no-plusplus": "off",
+      "react/forbid-prop-types": "off",
+      "react/prop-types": "off",
+      "react/jsx-uses-react": "off",
+      "react/no-danger": "off",
+      "camelcase": "off",
+      "consistent-return": "off",
+      "react/jsx-filename-extension": [
+        "error",
+        {
+          "extensions": [
+            ".js",
+            ".jsx"
+          ]
+        }
+      ],
+      "react/jsx-pascal-case": "warn",
+      "react/jsx-one-expression-per-line": "warn",
+      "react/jsx-no-useless-fragment": "warn",
+      "react/jsx-no-duplicate-props": "error",
+      "react/jsx-wrap-multilines": "warn",
+      "react/no-array-index-key": "off",
+      "react/jsx-props-no-spreading": "off",
+      "react/react-in-jsx-scope": "off",
+      "import/newline-after-import": [
+        "error",
+        {
+          "count": 2
+        }
+      ],
+      "import/no-unresolved": "error",
+      "import/no-cycle": "off",
+      "import/no-unused-modules": "off",
+      "import/no-commonjs": "error",
+      "import/no-nodejs-modules": "warn",
+      "import/first": "warn",
+      "import/exports-last": "error",
+      "import/no-duplicates": "warn",
+      "import/no-namespace": "off",
+      "import/order": "warn",
+      "import/prefer-default-export": "off",
+      "import/no-extraneous-dependencies": "off",
+      "import/no-anonymous-default-export": "error",
+      "jsx-a11y/no-noninteractive-element-interactions": "off",
+      "jsx-a11y/click-events-have-key-events": "off",
+      "react-hooks/exhaustive-deps": "off",
+      "react/no-unescaped-entities": "off"
+    }
+}

CHANGELOG.md

@@ -25,6 +25,10 @@ Types of changes:
 - ...
 
 -------------
+## 2.0.0 - 2022-08-19
+### Fixed
+- Low preview image width
+
 ## 1.6.9 - 2022-04-29
 ### Fixed
 - Low preview image width

README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v1.6.9-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
+[![Release](https://img.shields.io/github/v/release/scaleflex/react-cloudimage-responsive-plain)](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)
@@ -70,6 +70,7 @@ Cloudimage, contact us at
 
 * [Demo](#demo)
 * [Responsive plugins family](#plugin_family)
+* [Compatibility](#compatibility)
 * [Requirements](#requirements)
 * [Step 1: Installation](#installation)
 * [Step 2: Initialize](#initialize)
@@ -95,10 +96,15 @@ loading time.
 In order to use Cloudimage responsive plugins on your single-page application, please check out Cloudimage responsive plugins for vanilla Javascript and the most popular Javascript frameworks.
 
 <details>
-<summary>Javascript</summary>
-<a href="https://github.com/scaleflex/js-cloudimage-responsive">Js Cloudimage Responsive (Low Quality Preview)</a><br/>
-<a href="https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-BLUR-HASH.md">Js Cloudimage Responsive (Blur-hash)</a><br/>
-<a href="https://github.com/scaleflex/js-cloudimage-responsive/blob/master/README-PLAIN.md">Js Cloudimage Responsive (Plain)</a>
+<summary>React</summary>
+<a href="https://github.com/scaleflex/react-cloudimage-responsive">React Cloudimage Responsive (Low Quality Preview)</a><br/>
+<a href="https://github.com/scaleflex/react-cloudimage-responsive-blur-hash">React Cloudimage Responsive (Blur-hash)</a><br/>
+<a href="https://github.com/scaleflex/react-cloudimage-responsive-plain">React Cloudimage Responsive (Plain)</a>
+</details>
+
+<details>
+<summary>Next.js</summary>
+<a href="https://github.com/scaleflex/next-cloudimage-responsive">Vue Cloudimage Responsive (Low Quality Preview)</a><br/>
 </details>
 
 <details>
@@ -113,6 +119,13 @@ In order to use Cloudimage responsive plugins on your single-page application, p
 <a href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage Responsive (Low Quality Preview)</a><br/>
 </details>
 
+## <a name="compatibility"></a> Compatibility
+| Version | React Version |
+|---------|--------------|
+| >4.0.0   | >=18.0.0 |
+| <=1.6.9   | <=17.x.x |
+
+
 ## <a name="requirements"/> Requirements
 
 To use the Cloudimage Responsive plugin, you will need a