Need help with xray-react?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

loogle18
128 Stars 4 Forks MIT License 44 Commits 3 Opened issues

Description

React layout debugger.

Services available

!
?

Need anything else?

Contributors list

# 429,569
React
JavaScr...
debug
inspect...
38 commits
# 152,963
Chrome
nvm
reasonm...
reactjs
1 commit

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:

bash
  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 'XRAYREACTEDITOR' 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

Example

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.