@dbcdk/width-hook - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

package.json

 {
   "name": "@dbcdk/width-hook",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Hook that holds the width of a element with a ref. Updates on resize",
@@ -12,20 +12,20 @@ "main": "./lib/width-hook.js",
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "prop-types": "^15.7.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "css-loader": "^5.1.3",
+    "babel-loader": "^8.2.5",
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-stage-0": "^7.8.3",
+    "css-loader": "^6.7.1",
     "path": "^0.12.7",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "webpack": "^5.26.3",
-    "webpack-cli": "^4.5.0"
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   }
 }

webpack.config.js

@@ -1,24 +0,24 @@
-var path = require('path');
+var path = require("path");
 
 module.exports = {
-    mode: 'production',
-    entry: './width-hook.js',
-    output: {
-        path: path.resolve('lib'),
-        filename: 'width-hook.js',
-        libraryTarget: 'commonjs2'
-    },
-    module: {
-        rules: [
-            {
-                test: /\.jsx?$/,
-                exclude: /(node_modules)/,
-                use: 'babel-loader'
-            },
-        ]
-    },
-    externals: {
-      react: "react",
-      ReactDOM: "react-dom"
-    },
-}
+  mode: "production",
+  entry: "./width-hook.js",
+  output: {
+    path: path.resolve("lib"),
+    filename: "width-hook.js",
+    libraryTarget: "commonjs2",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules)/,
+        use: "babel-loader",
+      },
+    ],
+  },
+  externals: {
+    react: "react",
+    ReactDOM: "react-dom",
+  },
+};

width-hook.js

@@ -19,2 +19,2 @@ import { useState, useEffect } from "react";
 
-export default useWidth;
+export default useWidth;

width-hook.stories.js

@@ -12,8 +12,8 @@ import React, { useRef } from "react";
     docs: {
-      page: readme
-    }
-  }
+      page: readme,
+    },
+  },
 };
 
-export const Example1 = () => {
+const Example1 = () => {
   const ref = useRef();
@@ -23,7 +23,15 @@ const width = useWidth(ref);
   return (
-    <div ref={ref} style={{backgroundColor: '#f3f3f3', width: "80%", margin: "auto"}}>
+    <div
+      ref={ref}
+      style={{ backgroundColor: "#f3f3f3", width: "80%", margin: "auto" }}
+    >
       <p>shows width of this element</p>
-      <p>{width}</p>
+      {width}
     </div>
   );
-}
+};
+
+const Template = (args) => <Example1 {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6565

1.81%

Lines of code

69

11.29%

Number of lines in readme file

4

33.33%

No dependency changes