Configuration

React Scanner Studio uses the react-scanner.config.* configuration file to determine how to scan your codebase and where to output the results.

Overview

When you run react-scanner-studio init, a configuration file is automatically created in your current directory. This file is used by both react-scanner (to scan your codebase) and React Scanner Studio (to locate the scan output).

Default Configuration

Here's the default configuration generated by react-scanner-studio init:

module.exports = {
  crawlFrom: './src',
  includeSubComponents: true,
  importedFrom: '@mui/material',
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

Configuration File Support

While the init command creates a react-scanner.config.js file by default, React Scanner Studio supports several configuration file formats and extensions:

• JavaScript: .js, .mjs, .cjs
• TypeScript: .ts, .mts, .cts

The configuration file should be named react-scanner.config followed by one of these extensions. React Scanner Studio searches for this file starting from the current directory and moving upward through parent directories until it finds it. This allows you to run commands from any subdirectory within your project.

your-project/
├── react-scanner.config.js  ← Configuration file (or .ts, .mjs, etc.)
├── package.json
├── src/
│   └── ...
└── .react-scanner-studio/   ← Output directory
    └── scan-report.json

How It Works

1. react-scanner reads react-scanner.config.js to know:

   • Where to look for components (crawlFrom)
   • Which components to track (importedFrom)
   • Where to output the results (processors[].outputTo)

2. React Scanner Studio reads the same config to find the scan output file and display it in the dashboard.

Example Configurations

Material UI

module.exports = {
  crawlFrom: './src',
  includeSubComponents: true,
  importedFrom: '@mui/material',
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

Chakra UI

module.exports = {
  crawlFrom: './src',
  includeSubComponents: true,
  importedFrom: '@chakra-ui/react',
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

Ant Design

module.exports = {
  crawlFrom: './src',
  includeSubComponents: true,
  importedFrom: 'antd',
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

Custom Component Library

module.exports = {
  crawlFrom: './src',
  includeSubComponents: true,
  importedFrom: '@myorg/design-system',
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

Local Components

module.exports = {
  crawlFrom: './src',
  includeSubComponents: true,
  importedFrom: /\.\/components/, // Regex pattern
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

Next.js App Directory

module.exports = {
  crawlFrom: './app',
  includeSubComponents: true,
  importedFrom: '@/components',
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

Monorepo Setup

module.exports = {
  crawlFrom: './packages',
  includeSubComponents: true,
  importedFrom: '@myorg/ui',
  processors: [
    ['raw-report', { outputTo: './.react-scanner-studio/scan-report.json' }],
  ],
};

Important Notes

Output Path

React Scanner Studio expects the output file to be in .react-scanner-studio/scan-report.json. If you change this path, make sure to update it consistently.

Multiple Import Sources

You can use a regex pattern for importedFrom to track components from multiple sources:

importedFrom: /@mui\/material|@mui\/icons-material/;

What's Next?

• Configuration Options — Detailed explanation of all options
• CLI Commands — Learn about available commands
• CI/CD Integration — Automate scanning in your pipeline