Configuration

React Scanner Studio uses the react-scanner.config.js 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 project root. 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 Location

The configuration file must be named react-scanner.config.js and placed in your project's root directory (the same directory where you run the commands).

your-project/
├── react-scanner.config.js  ← Configuration file
├── 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