by loogle18

loogle18 / xray-react

React layout debugger.

128 Stars 4 Forks Last release: Not found MIT License 44 Commits 13 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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


npm install xray-react


As a plugin for webpack:

// webpack.config.js
const { XrayReactPlugin } = require('xray-react');

if(env.development) { plugins.push(new XrayReactPlugin()); }

Environment variables: -

- path or alias for editor's exec file, which will open files on component click.


  export XRAY_REACT_EDITOR='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'
  # or
  export XRAY_REACT_EDITOR=code

Arguments -

- (string) name of output filename. Default is 'bundle.js' or first available asset. -
- (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 'XRAYREACTEDITOR' env variable, otherwise files will open in default program. -
- (string) absolute path to internal sources like components etc (e.g.
). 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


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.