📦 React Code Scanner

A simple static code analysis tool built with Babel parser that scans your React (JS/TS/JSX/TSX) project for common security risks and code smells like:

• 🚨 eval() usage
• 🚨 Function constructor usage
• ⚠️ console.log statements

It provides developer-friendly results in a React UI table.

✨ Features

• Detects dangerous functions (eval, Function constructor).
• Detects console.log and similar debug statements.
• Parses modern JavaScript, TypeScript, JSX, TSX.
• Displays results in a clean React Tailwind UI table.

📦 Installation (for users)

Install the package from npm:

npm install @react-lib-tech/react-code-scanner

or with Yarn:

yarn add @react-lib-tech/react-code-scanner

🚀 Usage Examples

1. Run Code Scan Programmatically (Node.js)

If you want to scan your project folder for issues:

import { ReactCodeScanner } from "@react-lib-tech/react-code-scanner";

const results = ReactCodeScanner("./src");

console.log(results);
/*
[
  {
    type: "Security",
    message: "Avoid using eval()",
    suggestion: "Use JSON.parse() or safer parsing methods",
    file: "src/utils/unsafe.js",
    loc: { start: { line: 12, column: 4 } }
  }
]
*/

2. Show Results in React Component

If you want to render scan results inside your app:

import React from "react";
import { ReactCodeScannerResults } from "@react-lib-tech/react-code-scanner";

function App() {
  return (
    <div>
      <h1>🔎 My Project Scan</h1>
      <ReactCodeScannerResults root="./src" />
    </div>
  );
}

export default App;

This will render a styled table with all detected issues.

📊 Example UI

| File | Line | Type | Message | Suggestion | |---------------------|------|-----------|------------------|--------------------------------------| | src/App.js | 10 | Security | Avoid using eval | Use JSON.parse() or safer parsing | | src/utils/log.tsx | 45 | CodeSmell | console.log found | Remove in production or use a logger |

🛠️ Development (for contributors)

Install dependencies:

npm install

Run build:

npm run build

Run scanner test:

node scanner.js

📦 React Code Scanner

A lightweight SonarQube-like static analysis tool for React (JS/TS/JSX/TSX) projects.

It scans your code for:

• 🚨 Security issues (eval, Function, secrets, unsafe process.env)
• ⚠️ Code smells (console.log, var, empty catch)
• 📊 Complexity problems (cyclomatic complexity, long functions)
• 📂 Duplicate code (function body hashing)

It generates developer-friendly reports in JSON, HTML, SARIF and can display them in a React Tailwind UI table.

✨ Features

• Detects dangerous functions (eval, Function, alert, prompt).
• Detects console.log and debug statements.
• Detects hardcoded secrets (AWS keys, JWT, API tokens).
• Detects empty catch blocks & unsafe process.env usage.
• Calculates cyclomatic complexity & detects long functions.
• Detects duplicate functions/code blocks.
• Generates reports:
  • scan-report.json → CI/CD & automation
  • scan-report.html → SonarQube-style dashboard
  • scan-report.sarif → GitHub Code Scanning
• Configurable Quality Gate for CI/CD (fail builds if thresholds exceeded).
• Keeps history snapshots in .scan-history/ for trend analysis.
• Exposes a React Component to show results in a styled table.

📦 Installation

Install the package from npm:

npm install @react-lib-tech/react-code-scanner --save-dev


## 📜 License

MIT © 2025 Abhishek Kumar Singh

---