@react-scan/vite-plugin-react-scan NPM

@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