@povio/vite-plugin-react-scan

A Vite plugin that integrates React Scan into your Vite application, automatically detecting performance issues in your React components.

Installation

# npm
npm install -D @povio/vite-plugin-react-scan @povio/react-scan

# pnpm
pnpm add -D @povio/vite-plugin-react-scan @povio/react-scan

# yarn
yarn add -D @povio/vite-plugin-react-scan @povio/react-scan

Note: Make sure @povio/react-scan is installed as a peer dependency. The plugin will automatically locate it in your project's dependency tree.

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import reactScan from '@povio/vite-plugin-react-scan';

export default defineConfig({
  plugins: [
    react(),
    reactScan(),
  ],
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enable | boolean | process.env.NODE_ENV === 'development' | Enable/disable scanning | | ai | boolean | true | Inject query-controlled AI mode with TOON captures | | reactScanPackage | string | @povio/react-scan | Package name used by the injected module import | | scanOptions | object | { ... } | Custom React Scan options | | autoDisplayNames | boolean | false | Automatically add display names to React components | | debug | boolean | false | Enable debug logging |

Example Configuration

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import reactScan from '@povio/vite-plugin-react-scan';

export default defineConfig({
  plugins: [
    react(),
    reactScan({
      ai: true,
      enable: true,
      autoDisplayNames: true,
      scanOptions: {} // React Scan specific options
    }),
  ],
});

AI mode is disabled at runtime until the URL contains ?react_scan=true, ?react_scan=summary, ?react_scan=diagnose, or ?react_scan=deep. It exposes window.aiScan, and capture() returns TOON. Set ai: false to use the always-on visual scanner configured through scanOptions.

Development vs Production

• In development: The plugin injects React Scan directly into your application for real-time analysis
• In production: The plugin can be disabled/enabled by default with specific options

Contributing

Contributions are welcome! Please read our Contributing Guide for details.

License

React Scan Vite Plugin is MIT-licensed open-source software by Aiden Bai, Million Software, Inc., and contributors.