Propspotter NPM

Propspotter

Propspotter runs through your app's JSX and allows you to explore how your React components are being used. Propspotter provides a standalone environment that can be used or deployed with your design system documentation.

Demos

Image of the propspotter interface in SparkPost's web app

Getting Started

Install propspotter in your app:

npm i propspotter@alpha

Create a propspotter config file named propspotter.config.js in the root directory of your app:

// propspotter.config.js
module.exports = {
  // Sets page title
  title: 'My App',

  // Glob pattern for your app's code
  // Indicates where component data will be sourced
  include: '/src/**/!(*.spec|*.test).js',

  // Specifies which port Propspotter should use
  // Defaults to 9000
  port: 9000,

  // If provided, prepends this url to component locations and turns them into links
  locationUrl: 'https://github.com/jonambas/propspotter/tree/master/example',

  // If true, opens webpack dev server in a new tab when running the start command
  // Defaults to true
  openBrowser: true,

  // Specifies where to output the webpack build
  // Defaults to "dist/propspotter"
  outputPath: 'dist/propspotter'
};

Add the following scripts to your npm package.json.

// package.json
"scripts": {
  "propspotter:start": "propspotter start",
  "propspotter:build": "propspotter build"
}

And finally, run propspotter

npm run propspotter:start

Limitations

Propspotter uses typescript's compiler API to parse through your JSX.

Components will only be detected when explicitly rendered with JSX, ie <MyComponent />.
Components may not accurately represent their displayName if they are aliased or renamed.
Prop values that contain expressions such as variables or functions are not evaluated, but are stringified and truncated. Eg, if you use css-modules, you can filter className to include styles.css-class.