Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loogle18/xray-react
React layout debugger.
https://github.com/loogle18/xray-react
css debug development inspector layout react react-component style ui x-ray
Last synced: 3 days ago
JSON representation
React layout debugger.
- Host: GitHub
- URL: https://github.com/loogle18/xray-react
- Owner: loogle18
- License: mit
- Created: 2018-05-24T08:47:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-23T16:39:41.000Z (about 2 years ago)
- Last Synced: 2024-12-09T23:55:58.126Z (about 1 month ago)
- Topics: css, debug, development, inspector, layout, react, react-component, style, ui, x-ray
- Language: JavaScript
- Homepage:
- Size: 16.8 MB
- Stars: 130
- Watchers: 2
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# X-Ray React
React layout debugger inspired by [Xray-rails](https://github.com/brentd/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:
```javascript
// 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 '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:
```javascript
// index.js
import 'xray-react/lib/xray-react-ui';
```
Press **shift+x+r** to toggle xray-react ui
