@react-scan/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 @react-scan/vite-plugin-react-scan react-scan

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

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

Note: Make sure 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 '@react-scan/vite-plugin-react-scan';

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

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enable | boolean | process.env.NODE_ENV === 'development' | Enable/disable scanning | | 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 '@react-scan/vite-plugin-react-scan';

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

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.