@react-devtools-plus/scan

React Scan integration layer for React DevTools.

Overview

This package provides a seamless integration between react-scan and React DevTools, making it easy to add powerful performance analysis capabilities to your React applications.

Features

- 🚀 Easy Setup: Single function call to enable React Scan
- 🎨 Flexible Integration: Choose between overlay, panel, or both modes
- ⚙️ Full Configuration: Access to all react-scan options
- 🔧 Runtime Control: Start, stop, and configure scan at runtime
- 📦 Type Safe: Full TypeScript support

Installation

``bash
pnpm add @react-devtools-plus/scan
`

Quick Start

$3

`typescript
import { initScan } from '@react-devtools-plus/scan';

// Initialize with defaults (development only)
initScan();
`

$3

`typescript
import { initScan } from '@react-devtools-plus/scan';

const scanInstance = initScan({
enabled: true,
showToolbar: true,
animationSpeed: 'fast',
trackUnnecessaryRenders: true,
integrationMode: 'overlay',
});

// Control at runtime
scanInstance.stop();
scanInstance.start();
`

$3

`typescript
// vite.config.ts
import { defineConfig } from 'vite';
import { reactDevtools } from 'react-devtools/vite';

export default defineConfig({
plugins: [
reactDevtools({
scan: {
enabled: true,
showToolbar: true,
},
}),
],
});
`

API

$3

Initialize React Scan with optional configuration.

Parameters:

- options (optional): ReactDevtoolsScanOptions

Returns: ScanInstance

$3

Get the current scan instance.

Returns: ScanInstance | null

$3

- getOptions(): Get current scan options
- setOptions(options): Update scan options at runtime
- start(): Start scanning
- stop(): Stop scanning
- isActive(): Check if scanning is active

Configuration Options

All react-scan options are supported, plus:

`typescript
interface ReactDevtoolsScanOptions {
// ... all react-scan options

/**
* Integration mode
* @default 'overlay'
*/
integrationMode?: 'overlay' | 'panel' | 'both';

/**
* Sync state with DevTools panel
* @default true
*/
syncWithDevtools?: boolean;
}
`

Examples

$3

`typescript
import { initScan } from '@react-devtools-plus/scan';

if (process.env.NODE_ENV === 'development') {
initScan({
enabled: true,
log: false,
});
}
`

$3

`typescript
import { getScan } from '@react-devtools-plus/scan';

// Later in your code...
const scan = getScan();

if (scan?.isActive()) {
// Temporarily disable for screenshot
scan.stop();
takeScreenshot();
scan.start();
}
`

$3

`typescript
import { initScan } from '@react-devtools-plus/scan';

initScan({
animationSpeed: 'slow', // 'slow' | 'fast' | 'off'
});
``

Integration with React DevTools

This package is designed to work seamlessly with the React DevTools plugin system. When used together, you get:

- Unified configuration through the DevTools plugin
- Automatic injection in development builds
- Coordinated UI between DevTools panel and Scan overlay

See React DevTools Scan Integration Guide for more details.

License

MIT