inspectr

A CLI for inspecting React components to reveal propTypes and defaultProps values.

Installation

npm install -g inspectr

Usage

inspectr takes two arguments

inspectr <module> [component] 

inspectr takes the -f option to specify a specific file path to inspect

inspectr <module-path> [component] -f 

module

The module argument is the name of the module to search for a React Component to inspect or if you pass -f the relative file path to a module to inspect.

component

The component argument is optional if you are inspecting default exports, however to inspect named exports, you need to pass the name of the export here.

Examples

Inspecting node modules

Assuming you want to inspect react-router and are in your project root, run -

inspectr react-router
 
┌──────────────────┬────────────────────────┬────────────────────────────────────────────┐
│ Property         │ Type                   │ Default Value                              │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ history          │ React.PropTypes.object │ N/A                                        │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ children         │ React.PropTypes.object │ N/A                                        │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ routes           │ React.PropTypes.object │ N/A                                        │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ RoutingContext   │ React.PropTypes.func   │ function RoutingContext() {                │
│                  │                        │     _classCallCheck(this, RoutingContext); │
│                  │                        │                                            │
│                  │                        │     _Component.apply(this, arguments);     │
│                  │                        │   }                                        │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ createElement    │ React.PropTypes.func   │ N/A                                        │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ onError          │ React.PropTypes.func   │ N/A                                        │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ onUpdate         │ React.PropTypes.func   │ N/A                                        │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ parseQueryString │ React.PropTypes.func   │ N/A                                        │
├──────────────────┼────────────────────────┼────────────────────────────────────────────┤
│ stringifyQuery   │ React.PropTypes.func   │ N/A                                        │
└──────────────────┴────────────────────────┴────────────────────────────────────────────┘

If you want to inspect the Link component, you could run

inspectr react-router Link
 
┌───────────────────┬────────────────────────┬───────────────┐
│ Property          │ Type                   │ Default Value │
├───────────────────┼────────────────────────┼───────────────┤
│ to                │ React.PropTypes.string │ N/A           │
├───────────────────┼────────────────────────┼───────────────┤
│ query             │ React.PropTypes.object │ N/A           │
├───────────────────┼────────────────────────┼───────────────┤
│ hash              │ React.PropTypes.string │ N/A           │
├───────────────────┼────────────────────────┼───────────────┤
│ state             │ React.PropTypes.object │ N/A           │
├───────────────────┼────────────────────────┼───────────────┤
│ activeStyle       │ React.PropTypes.object │ N/A           │
├───────────────────┼────────────────────────┼───────────────┤
│ activeClassName   │ React.PropTypes.string │ N/A           │
├───────────────────┼────────────────────────┼───────────────┤
│ onlyActiveOnIndex │ React.PropTypes.bool   │ N/A           │
├───────────────────┼────────────────────────┼───────────────┤
│ onClick           │ React.PropTypes.func   │ N/A           │
└───────────────────┴────────────────────────┴───────────────┘
 

Inspecting file paths

To inspect your own components you can use file paths with the -f option.

inspectr app/javascripts/components/button.jsx -f

Limitations

Currently inspectr can only determine PropTypes through evaluting the checkType returned from the React PropTypes definition. So this means it supports the following propTypes-

• React.PropTypes.array
• React.PropTypes.bool
• React.PropTypes.func
• React.PropTypes.number
• React.PropTypes.object
• React.PropTypes.string
• React.PropTypes.any