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 │
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