Skip to main content

Config Overview

React Preview may not work out of the box for your project, but fear not! You may only be one line of config away from your goal.

Here is an overview of supported options:

/reactpreview.config.js
const reactpreview = require("@reactpreview/config");
module.exports = reactpreview.config({  /**   * Configure custom aliases (auto-detected if you use TypeScript).   */  alias: {    foo: "src/foo"  },
  /**   * Configure a public assets directory.   */  publicDir: "public",
  /**   * Set up a custom component to wrap around previewed components.   *   * Useful to set up context providers and CSS dependencies.   */  wrapper: {    path: "__reactpreview__/Wrapper.tsx",    componentName: "Wrapper"  },
  /**   * Customise the exported React component name for SVG files.   */  svgr: {    componentName: "default"  },
  /**   * Specify a custom Vite configuration.   */  vite: vite.UserConfig;});

Read on to learn about:

  • configuring module aliases
  • handling static assets
  • setting up CSS rules
  • wrapping components (including providing context)
  • customising SVGR components