Skip to content
Render visualizer for ReactJS
JavaScript
Branch: master
Clone or download

Latest commit

redsunsoft Merge pull request #6 from itszero/bugfix/react_013
various bugfixes & React 0.13 compatibility
Latest commit 6fba990 Aug 22, 2016

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Feb 20, 2015
README.md Updated README and version Mar 9, 2015
index.js Merge pull request #6 from itszero/bugfix/react_013 Aug 22, 2016
package.json Updated README and version Mar 9, 2015

README.md

React Render Visualizer

A visual way to see what is (re)rendering and why.

Features

  • Shows when component is being mounted or updated by highlighting (red for mount, yellow for update)
  • Shows render count for each component instance
  • Shows individual render log for each component instance

Installation

npm install react-render-visualizer

Usage

This is a mixin so once you've included the source code, simply mix it in to any react component you want to start monitoring.

E.g.

var ReactRenderVisualizer = require("react-render-visualizer");

app.TodoItem = React.createClass({
    mixins: [ReactRenderVisualizer],

Component will show up with a blue border box when being monitored

Demo

demo

You can’t perform that action at this time.