New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
cra-template-07
Advanced tools
cra-template-07 - npm Package Compare versions
Comparing version 2.0.1 to 2.0.2
| { | ||
| "name": "cra-template-07", | ||
| "version": "2.0.1", | ||
| "version": "2.0.2", | ||
| "keywords": [ | ||
@@ -5,0 +5,0 @@ "react", |
| { | ||
| "name": "07_cra_template", | ||
| "version": "1.0.0", | ||
| "private": true, | ||
| "package": { | ||
| "name": "07_cra_template", | ||
| "version": "1.0.0", | ||
| "private": true, | ||
| "dependencies": { | ||
| "@testing-library/jest-dom": "^5.11.4", | ||
| "@testing-library/react": "^11.1.0", | ||
| "@testing-library/user-event": "^12.1.10", | ||
| "@testing-library/jest-dom": "^5.16.1", | ||
| "@testing-library/react": "^12.1.2", | ||
| "@testing-library/user-event": "^13.5.0", | ||
| "axios": "^0.24.0", | ||
| "framer-motion": "^4.1.17", | ||
| "html-react-parser": "^1.4.1", | ||
| "react": "^17.0.2", | ||
| "react-animate-height": "^2.0.23", | ||
| "react-dom": "^17.0.2", | ||
| "react-helmet": "^6.1.0", | ||
| "react-icons": "^4.3.1", | ||
| "react-scripts": "4.0.3", | ||
| "web-vitals": "^1.0.1", | ||
| "sass": "^1.47.0" | ||
| "react-json-view": "^1.21.3", | ||
| "react-router-dom": "^6.2.1", | ||
| "react-scripts": "5.0.0", | ||
| "react-use-scroll-direction": "^0.1.0", | ||
| "react-hot-keys": "^2.7.1", | ||
| "sass": "^1.47.0", | ||
| "web-vitals": "^2.1.3" | ||
| }, | ||
| "scripts": { | ||
| "start": "react-scripts --openssl-legacy-provider start", | ||
| "build": "CI=false react-scripts --openssl-legacy-provider build", | ||
| "test": "react-scripts --openssl-legacy-provider test", | ||
| "eject": "react-scripts --openssl-legacy-provider eject" | ||
| "start": "react-scripts start", | ||
| "build": "CI=false react-scripts build", | ||
| "test": "react-scripts test", | ||
| "eject": "react-scripts eject" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": ["react-app", "react-app/jest"] | ||
| }, | ||
| "browserslist": { | ||
| "production": [">0.2%", "not dead", "not op_mini all"], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| } | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": ["react-app", "react-app/jest"] | ||
| }, | ||
| "browserslist": { | ||
| "production": [">0.2%", "not dead", "not op_mini all"], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| } | ||
| } |
@@ -5,3 +5,3 @@ import React, { useContext, useEffect, useState } from "react"; | ||
| // External components | ||
| import KeyboardEventHandler from "react-keyboard-event-handler"; | ||
| import Hotkeys from "react-hot-keys"; | ||
| import ReactJson from "react-json-view"; | ||
@@ -49,2 +49,3 @@ | ||
| }, [devStatus, hideDevMenu]); | ||
| return ( | ||
@@ -56,6 +57,8 @@ <div | ||
| > | ||
| <KeyboardEventHandler | ||
| handleKeys={["ctrl + shift + d"]} | ||
| onKeyEvent={(key, e) => toggleDevStatus(!devStatus)} | ||
| /> | ||
| <Hotkeys | ||
| keyName="ctrl+shift+d" | ||
| onKeyDown={() => toggleDevStatus(!devStatus)} | ||
| // onKeyUp={() => toggleDevStatus(!devStatus)} | ||
| ></Hotkeys> | ||
| ) | ||
| <div | ||
@@ -77,30 +80,26 @@ style={{ | ||
| </div> | ||
| {devStatus && ( | ||
| <> | ||
| <div | ||
| id="devmodecontainer" | ||
| style={{ | ||
| position: "fixed", | ||
| top: 0, | ||
| left: 0, | ||
| zIndex: 999, | ||
| minHeight: "100vh", | ||
| background: "#ffffff", | ||
| width: 550, | ||
| minWidth: "25vw", | ||
| maxHeight: "100vh", | ||
| boxShadow: "0px 0px 50px rgba(0,0,0,0.25)", | ||
| padding: "3rem", | ||
| transform: | ||
| devStatus && !hideDevMenu | ||
| ? "" | ||
| : "translateX(-200px)", | ||
| opacity: devStatus && !hideDevMenu ? 1 : 0, | ||
| pointerEvents: | ||
| devStatus && !hideDevMenu ? "all" : "none", | ||
| resize: "both", | ||
| overflow: "auto", | ||
| }} | ||
| > | ||
| {/* <div className="mb-4"> | ||
| <div | ||
| id="devmodecontainer" | ||
| style={{ | ||
| position: "fixed", | ||
| top: 0, | ||
| left: 0, | ||
| zIndex: 999, | ||
| minHeight: "100vh", | ||
| background: "#ffffff", | ||
| width: 550, | ||
| minWidth: "25vw", | ||
| maxHeight: "100vh", | ||
| boxShadow: "0px 0px 50px rgba(0,0,0,0.25)", | ||
| padding: "3rem", | ||
| transform: | ||
| devStatus && !hideDevMenu ? "" : "translateX(-200px)", | ||
| opacity: devStatus && !hideDevMenu ? 1 : 0, | ||
| pointerEvents: devStatus && !hideDevMenu ? "all" : "none", | ||
| resize: "both", | ||
| overflow: "auto", | ||
| transition: "all 0.15s ease-in-out", | ||
| }} | ||
| > | ||
| {/* <div className="mb-4"> | ||
| <div | ||
@@ -134,18 +133,18 @@ style={{ | ||
| </div> */} | ||
| <div | ||
| style={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <p | ||
| style={{ | ||
| fontSize: "2rem", | ||
| marginBottom: "1rem", | ||
| }} | ||
| > | ||
| Current path: | ||
| </p> | ||
| <pre>{pathname}</pre> | ||
| </div> | ||
| {/* {data && ( | ||
| <div | ||
| style={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <p | ||
| style={{ | ||
| fontSize: "2rem", | ||
| marginBottom: "1rem", | ||
| }} | ||
| > | ||
| Current path: | ||
| </p> | ||
| <pre>{pathname}</pre> | ||
| </div> | ||
| {/* {data && ( | ||
| <ReactJson | ||
@@ -158,71 +157,86 @@ src={data} | ||
| )} */} | ||
| {data && ( | ||
| <div | ||
| style={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <p | ||
| style={{ | ||
| fontSize: "2rem", | ||
| marginBottom: "1rem", | ||
| }} | ||
| > | ||
| Root:{" "} | ||
| </p> | ||
| <ReactJson | ||
| src={data} | ||
| enableClipboard={false} | ||
| indentWidth="2" | ||
| collapsed={true} | ||
| /> | ||
| </div> | ||
| )} | ||
| {currentRoute && ( | ||
| <div | ||
| style={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <p | ||
| style={{ | ||
| marginBottom: "1rem", | ||
| fontSize: "2rem", | ||
| }} | ||
| > | ||
| Current page data: | ||
| </p> | ||
| <ReactJson | ||
| name="page" | ||
| src={currentRoute} | ||
| enableClipboard={false} | ||
| indentWidth="2" | ||
| collapsed={1} | ||
| /> | ||
| </div> | ||
| )} | ||
| {styles && ( | ||
| <div | ||
| style={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <p | ||
| style={{ | ||
| marginBottom: "1rem", | ||
| fontSize: "2rem", | ||
| }} | ||
| > | ||
| SASS exports | ||
| </p> | ||
| <ReactJson | ||
| src={styles} | ||
| name="main.scss" | ||
| enableClipboard={false} | ||
| indentWidth="2" | ||
| collapsed={1} | ||
| /> | ||
| </div> | ||
| )} | ||
| {/* {seoDevData && ( | ||
| {data && ( | ||
| <div | ||
| style={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <p | ||
| style={{ | ||
| fontSize: "2rem", | ||
| marginBottom: "1rem", | ||
| }} | ||
| > | ||
| Root:{" "} | ||
| </p> | ||
| <ReactJson | ||
| src={data} | ||
| enableClipboard={false} | ||
| indentWidth="2" | ||
| collapsed={true} | ||
| style={{ | ||
| width: "100%", | ||
| whiteSpace: "normal", | ||
| overflowX: "scroll", | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| {currentRoute && ( | ||
| <div | ||
| style={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <p | ||
| style={{ | ||
| marginBottom: "1rem", | ||
| fontSize: "2rem", | ||
| }} | ||
| > | ||
| Current page data: | ||
| </p> | ||
| <ReactJson | ||
| name="page" | ||
| src={currentRoute} | ||
| enableClipboard={false} | ||
| indentWidth="2" | ||
| style={{ | ||
| width: "100%", | ||
| whiteSpace: "normal", | ||
| overflowX: "scroll", | ||
| }} | ||
| collapsed={true} | ||
| /> | ||
| </div> | ||
| )} | ||
| {styles && ( | ||
| <div | ||
| style={{ | ||
| marginBottom: "2rem", | ||
| }} | ||
| > | ||
| <p | ||
| style={{ | ||
| marginBottom: "1rem", | ||
| fontSize: "2rem", | ||
| }} | ||
| > | ||
| SASS exports | ||
| </p> | ||
| <ReactJson | ||
| src={styles} | ||
| name="main.scss" | ||
| enableClipboard={false} | ||
| indentWidth="2" | ||
| collapsed={1} | ||
| style={{ | ||
| width: "100%", | ||
| whiteSpace: "normal", | ||
| overflowX: "scroll", | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| {/* {seoDevData && ( | ||
| <> | ||
@@ -238,3 +252,3 @@ <p className="h3 mt-4">Current page SEO: </p> | ||
| )} */} | ||
| {/* {currentDevData && ( | ||
| {/* {currentDevData && ( | ||
| <> | ||
@@ -249,3 +263,3 @@ <ReactJson | ||
| )} */} | ||
| {/* <div | ||
| {/* <div | ||
| className="btn btn-primary" | ||
@@ -257,5 +271,3 @@ style={{ position: "sticky", bottom: "100%", left: "85%" }} | ||
| </div> */} | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| <div | ||
@@ -262,0 +274,0 @@ style={{ |
Fixed alerts
AI-detected possible typosquat
Supply chain riskAI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by2.16%
898
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-90.96%
41028
- Number of package files
- decreased by-3.7%
26
No dependency changes