loogle18 / Xray React
Licence: mit
React layout debugger.
Stars: ✭ 128
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Xray React
standard-www
👆 Website for JavaScript Standard Style (@standard)
Stars: ✭ 28 (-78.12%)
Mutual labels: development, style
Theme Ui
Build consistent, themeable React apps based on constraint-based design principles
Stars: ✭ 4,150 (+3142.19%)
Mutual labels: layout, style
go-getting-started
Develop Go Apps in Kubernetes with Okteto
Stars: ✭ 32 (-75%)
Mutual labels: development, debug
ducky
Chrome extension to overlay a (super adorable) rubber duck, as a virtual companion during rubber duck debugging.
Stars: ✭ 80 (-37.5%)
Mutual labels: development, debug
Spector.js
Explore and Troubleshoot your WebGL scenes with ease.
Stars: ✭ 599 (+367.97%)
Mutual labels: inspector, debug
Okteto
Develop your applications directly in your Kubernetes Cluster
Stars: ✭ 1,937 (+1413.28%)
Mutual labels: development, debug
theme-ui-native
Build consistent, themeable React Native apps based on constraint-based design principles
Stars: ✭ 67 (-47.66%)
Mutual labels: layout, style
Snazzy
Format JavaScript Standard Style as Stylish (i.e. snazzy) output
Stars: ✭ 381 (+197.66%)
Mutual labels: development, style
react-native-bootstrap-styles
Bootstrap style library for React Native
Stars: ✭ 95 (-25.78%)
Mutual labels: layout, style
React Xmasonry
Simple, minimalistic and featured native masonry layout for React JS.
Stars: ✭ 62 (-51.56%)
Mutual labels: layout, react-component
winston-dev-console
Winston@3 console format aimed to improve development UX
Stars: ✭ 88 (-31.25%)
Mutual labels: development, debug
VOSviewer-Online
VOSviewer Online is a tool for network visualization. It is a web-based version of VOSviewer, a popular tool for constructing and visualizing bibliometric networks.
Stars: ✭ 44 (-65.62%)
Mutual labels: layout, react-component
griding
🧱 lean grid & responsive for react
Stars: ✭ 18 (-85.94%)
Mutual labels: layout, react-component
standard-packages
List of packages that use `standard`
Stars: ✭ 32 (-75%)
Mutual labels: development, style
react-super-styled
Responsive JSX layouts with Styled Components
Stars: ✭ 77 (-39.84%)
Mutual labels: layout, react-component
lipgloss
Style definitions for nice terminal layouts 👄
Stars: ✭ 5,453 (+4160.16%)
Mutual labels: layout, style
Gdbstub
A simple, dependency-free GDB stub that can be easily dropped in to your project.
Stars: ✭ 56 (-56.25%)
Mutual labels: development, debug
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].