Fix index.js issue in published version and update to 1.0.2

package.json

@@ -1,6 +1,6 @@
 {
     "name": "minimum-window-size",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "Minimum Window Size library is a React library that prevents users with small window size from using your React app and visually hints users to adjust window size.",
     "keywords": [
         "minimum",
@@ -14,13 +14,9 @@
         "hide"
     ],
     "files": [
-        "src/*",
         "README.md",
         "package.json",
-        ".babelrc",
-        ".npmignore",
-        "index.js",
-        "index.css"
+        "index.js"
     ],
     "repository": {
         "type": "git",

src/index.js

@@ -0,0 +1,63 @@
+// This component also requires 'react',
+// but it has already been included in the
+// list of dependencies in package.json
+import React, {useEffect, useRef, useState} from 'react';
+
+import './index.css';
+
+function Index({width, height, ...props}) {
+    const [shouldHide, setShouldHide] = useState(true);
+    const requiredBox = useRef(null);
+    const currentBox = useRef(null);
+
+    useEffect(() => {
+        onScreenResize();
+        window.addEventListener('resize', onScreenResize);
+    })
+
+    function onScreenResize() {
+        // update hidden status
+        console.log(window.innerWidth, window.innerHeight)
+        if (window.innerWidth && window.innerWidth < width) {
+            setShouldHide(true)
+        } else if (window.innerHeight && window.innerHeight < height) {
+            setShouldHide(true)
+        } else {
+            setShouldHide(false)
+            return;
+        }
+
+        // update present box
+        let requiredWidth = 300;
+        let requiredHeight = Math.floor(requiredWidth * height / width);
+        requiredBox.current.style.height = `${requiredHeight}px`;
+        requiredBox.current.style.width = `${requiredWidth}px`;
+
+        let currentWidth = 300 * window.innerWidth / width;
+        let currentHeight = requiredHeight * window.innerHeight / height;
+        currentBox.current.style.height = `${currentHeight}px`;
+        currentBox.current.style.width = `${currentWidth}px`;
+    }
+
+    return (
+        <div className="minimum-window-size-container">
+            <div className={"minimum-window-size-hide-content"} hidden={!shouldHide}>
+                <div className={"minimum-window-size-caption"}>Adjust browser size</div>
+                <div className={"minimum-window-size-sub-caption"}>This app requires a larger screen size</div>
+                <div className={"minimum-window-size-present-container"}>
+                    <div className={"minimum-window-size-caption-required"}>Required size</div>
+                    <div className={"minimum-window-size-box-required"} ref={requiredBox}>
+                        <div className={"minimum-window-size-box-current"} ref={currentBox}>
+                            <div className={"minimum-window-size-caption-current"}>Browser size</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className={"minimum-window-size-real-content"} hidden={shouldHide}>
+                {props.children}
+            </div>
+        </div>
+    );
+}
+
+export default Index;

webpack.config.js

@@ -2,9 +2,9 @@ const path = require('path');
 
 module.exports = {
   mode: 'production',
-  entry: './index.js',
+  entry: './src/index.js',
   output: {
-    path: path.resolve('lib'),
+    path: path.resolve(__dirname),
     filename: 'index.js',
     libraryTarget: 'commonjs2',
   },
@@ -13,14 +13,14 @@ module.exports = {
       {
         test: /\.js?$/,
         include: [
-          path.resolve(__dirname)
+          path.resolve(__dirname, "src")
         ],
         loader: 'babel-loader',
       },
       {
         test: /\.css$/,
         include: [
-          path.resolve(__dirname)
+          path.resolve(__dirname, "src")
         ],
         use: [
           'style-loader',