X-Ray React
React layout debugger inspired by Xray-rails
Supported versions:
React: 15.x.x, 16.x.x
Webpack: 2.x.x, 3.x.x, 4.x.x
Installation
npm install xray-react
Usage
As a plugin for webpack:
// webpack.config.js
const { XrayReactPlugin } = require('xray-react');
if(env.development) {
plugins.push(new XrayReactPlugin());
}
Environment variables:
-
XRAY_REACT_EDITOR
- path or alias for editor's exec file, which will open files on component click.Example:
export XRAY_REACT_EDITOR='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code' # or export XRAY_REACT_EDITOR=code
Arguments
output
- (string) name of output filename. Default is 'bundle.js' or first available asset.server
- (boolean) flag that specifies whether or not to run server for handling files opening on component click. Default is true. If this option is set to true, please be sure you have exported 'XRAY_REACT_EDITOR' env variable, otherwise files will open in default program.sourcePath
- (string) absolute path to internal sources like components etc (e.g./home/user/project/client/src
). Default is compilation context.
As a module:
// index.js
import 'xray-react/lib/xray-react-ui';
Press shift+x+r to toggle xray-react ui