inspectr v0.0.6
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