React Pattern Analyzer

Static analysis and design-pattern recommendations for React projects. Scans JSX/TSX files, detects code smells, and generates an HTML report with per-file improvement tips, recommended patterns, and testing suggestions.

Features

• Multi-format support — Analyze any React project (JS, TS, JSX, TSX)
• Code smell detection
  • Large "god" components
  • Components with many props (prop-drilling smell)
  • Heavy useState usage without useReducer
  • Many useEffect calls (missing custom hooks)
  • Missing useContext despite prop-heavy components
  • Projects with no tests or tests without React Testing Library
• Per-file metrics — LOC, prop count, detected issues, suggested improvements, recommended design patterns
• HTML report — Overview of hooks usage, design-pattern suggestions, per-file component analysis table

Installation

npm install react-pattern-analyzer

Or run without installing:

npx react-pattern-analyzer

Usage

CLI

# Analyze the default src folder
npx react-pattern-analyzer

# Analyze a specific path
npx react-pattern-analyzer ./my-app/src

# Generate HTML report (writes to project root or custom path)
npx react-pattern-analyzer --html-report
npx react-pattern-analyzer ./src --html-report ./report.html

# Output as JSON
npx react-pattern-analyzer -f json

npm Script

Add to your project's package.json:

{
  "scripts": {
    "react-pattern-report": "react-pattern-analyzer ./src --html-report"
  }
}

Then run:

npm run react-pattern-report