React-ui-debugger NPM

React UI Debugger

Getting Started

To see what's going on react UI. You can use it as decorator (@ReactUIDebugger) or as function (ReactUIDebugger(MyComponent)).

npm.io

Prerequisites

on NPM

npm install react-ui-debugger --save-dev

on Yarn

yarn add react-ui-debugger -D

Usage

Firstly, you need to import package to your code file.

import ReactUIDebugger from 'react-ui-debugger'; // es6
var ReactUIDebugger = require('react-ui-debugger'); // es5 or node 4+

There are 2 options to use this. Firstly, if your application supports decorator (ES7), you can just decorate your class (or stateless component) with ReactUIDebugger.

import React from 'react';
import ReactUIDebugger from 'react-ui-debugger';

@ReactUIDebugger
export default class Hello extends React.Component {
  render() {
    return React.createElement('div', null, 'Hello World');
  }
}

or you can export your component as using argument on ReactUIDebugger function.

import React from 'react';
import ReactUIDebugger from 'react-ui-debugger';

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, 'Hello World');
  }
}

export default ReactUIDebugger(Hello);

If you have DEV variable and DEV is false or if you set UIdebugActive false inside of component, it will not work.

When it start to work, it will show colored borders of components that you use with ReactUIDebugger. Red means componentDidMount, Green means componentDidUpdate.