react-scanner

library1.2.0jsnpmunverified

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.

devops web-framework

npm install react-scanner

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SCANNER

react-scanner

devopsjavascriptv1.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

scan

✓ import scan from 'react-scanner';

✗ import { scan } from 'react-scanner';

The primary `scan` function is exported as a default export from the main package entry point.

countComponents

✓ import { countComponents } from 'react-scanner/processors';

✗ import { countComponents } from 'react-scanner';

Built-in processors like `countComponents` are located in the `react-scanner/processors` submodule.

Config

✓ import type { Config } from 'react-scanner';

✗ import { Config } from 'react-scanner';

When using TypeScript, `Config` should be imported as a type for defining the scanner's configuration object.

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.

import { mkdir, writeFile, rm } from 'node:fs/promises'; import { join } from 'node:path'; import scan from 'react-scanner'; async function runScanner() { const tmpDir = join(process.cwd(), 'tmp-scanner-test'); await mkdir(tmpDir, { recursive: true }); const jsxContent = ` import React from 'react'; import { Button, Card } from './components'; function App() { return ( <div> <Button label="Click Me" onClick={() => console.log('clicked')} /> <Card title="Hello" description="This is a test card" /> <Button label="Submit" variant="primary" /> </div> ); } export default App; `; await writeFile(join(tmpDir, 'App.jsx'), jsxContent); const componentsContent = ` import React from 'react'; export const Button = ({ label, onClick, variant }) => <button>{label}</button>; export const Card = ({ title, description }) => <div><h3>{title}</h3><p>{description}</p></div>; `; await writeFile(join(tmpDir, 'components.js'), componentsContent); const config = { rootDir: tmpDir, excludedPaths: [], processors: [], getComponentName: ({ local }) => local, getPropValue: ({ value }) => value && value.type === 'JSXExpressionContainer' ? '(Identifier)' : value }; try { console.log('Scanning React components...'); const report = await scan(config); console.log('Generated Report:\n', JSON.stringify(report, null, 2)); } catch (error) { console.error('Error during scanning:', error); } finally { await rm(tmpDir, { recursive: true, force: true }); console.log(`Cleaned up temporary directory: ${tmpDir}`); } } runScanner();

react-scanner --version

Debug

Known issues

breakingThe `getComponentName` configuration option was introduced in version 0.5.0. If you were relying on previous implicit component name extraction, you must explicitly configure `getComponentName: ({ local }) => local` to maintain the old behavior.

fix

Update your `react-scanner` configuration to include `getComponentName: ({ local }) => local` if you need to replicate the component name extraction logic from versions prior to 0.5.0.

affects: >=0.5.0

gotchaWhen no files are found to scan based on the provided configuration, `react-scanner` will now exit with an exit code of 1. This change, introduced in version 0.6.0, can cause CI/CD pipelines to fail if they expect a 0 exit code even for empty scan results.

fix

Ensure your scanning process handles a non-zero exit code if it's acceptable for no files to be found. Adjust CI/CD scripts to either validate file existence before running the scanner or to explicitly allow a non-zero exit code in this scenario.

affects: >=0.6.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'type')

This error often occurs in custom `getPropValue` or `getComponentName` functions when attempting to access properties of a `value` or `local` object that might be `null` or `undefined` for certain AST nodes.

fix

Add nullish coalescing or optional chaining (`?.`) when accessing properties within your custom configuration functions, e.g., `value && value.type` or `value?.type`.

Error: Configuration is not valid. 'rootDir' is required.

The `rootDir` property is missing or empty in the `react-scanner` configuration object. Since version 0.3.0, configurations are strictly validated.

fix

Ensure your configuration object explicitly includes a `rootDir` property pointing to the base directory for scanning, e.g., `{ rootDir: './src' }`.

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/moroshko/react-scanner ↗

packagehttps://www.npmjs.com/package/react-scanner ↗