{"library":"react-scanner","title":"React Component & Prop Usage Scanner","description":"react-scanner is a static analysis tool designed to extract React component and prop usage from source code, supporting both JavaScript and TypeScript. It operates by crawling a specified directory, identifying relevant files, and then parsing them to build a detailed JSON report of component instances and their associated prop values. The current stable version is 1.2.0, with a history of regular updates indicating active maintenance and feature development. Key differentiators include its static analysis approach, eliminating the need for runtime instrumentation, robust TypeScript support, and a flexible architecture that allows for custom processors to transform the raw JSON output into actionable insights, such as component usage counts or prop value distributions. It is primarily used for understanding the adoption and utilization patterns of design system components within a codebase.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-scanner"],"cli":{"name":"react-scanner","version":null}},"imports":["import scan from 'react-scanner';","import { countComponents } from 'react-scanner/processors';","import type { Config } from 'react-scanner';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { mkdir, writeFile, rm } from 'node:fs/promises';\nimport { join } from 'node:path';\nimport scan from 'react-scanner';\n\nasync function runScanner() {\n  const tmpDir = join(process.cwd(), 'tmp-scanner-test');\n  await mkdir(tmpDir, { recursive: true });\n\n  const jsxContent = `\n    import React from 'react';\n    import { Button, Card } from './components';\n\n    function App() {\n      return (\n        <div>\n          <Button label=\"Click Me\" onClick={() => console.log('clicked')} />\n          <Card title=\"Hello\" description=\"This is a test card\" />\n          <Button label=\"Submit\" variant=\"primary\" />\n        </div>\n      );\n    }\n    export default App;\n  `;\n  await writeFile(join(tmpDir, 'App.jsx'), jsxContent);\n\n  const componentsContent = `\n    import React from 'react';\n    export const Button = ({ label, onClick, variant }) => <button>{label}</button>;\n    export const Card = ({ title, description }) => <div><h3>{title}</h3><p>{description}</p></div>;\n  `;\n  await writeFile(join(tmpDir, 'components.js'), componentsContent);\n\n  const config = {\n    rootDir: tmpDir,\n    excludedPaths: [],\n    processors: [],\n    getComponentName: ({ local }) => local,\n    getPropValue: ({ value }) => value && value.type === 'JSXExpressionContainer' ? '(Identifier)' : value\n  };\n\n  try {\n    console.log('Scanning React components...');\n    const report = await scan(config);\n    console.log('Generated Report:\\n', JSON.stringify(report, null, 2));\n  } catch (error) {\n    console.error('Error during scanning:', error);\n  } finally {\n    await rm(tmpDir, { recursive: true, force: true });\n    console.log(`Cleaned up temporary directory: ${tmpDir}`);\n  }\n}\n\nrunScanner();","lang":"typescript","description":"Demonstrates programmatic use of `react-scanner` to scan a temporary React project and print the raw JSON report. It shows how to configure the scanner with basic options like `rootDir`, `getComponentName`, and `getPropValue` to analyze component and prop usage.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}