React Storybook example for stats.js integration

config.js

import { configure, setAddon } from '@kadira/storybook';
import MonitoredStory from './MonitoredStory.js';

setAddon({
  addMonitored(storyName, storyFn, rafFn) {
    this.add(storyName, (context) => (
      <MonitoredStory rafFn={rafFn}>
        {storyFn(context)}
      </MonitoredStory>
    ));
  },
});

configure(loadStories, module);

example.js

storiesOf('something', module)
  .addMonitored('a component with monitored performance', () => (
    <Component />
  ), () => {
    // This is where the actual work is done - anything in here will be monitored by the stats
    // view and displayed, so this is where you want to do your animation work, etc.
    const x = Math.random() * 1000000;
    for (let i = 0; i < x; i++) {
      Math.random(); // burn some CPU cycles
    }
  });

MonitoredStory.js

import React from 'react';
import Stats from 'stats.js';

const { requestAnimationFrame, cancelAnimationFrame } = window;
class MonitoredStory extends React.Component {
  constructor(...args) {
    super(...args);
    this.rafFn = () => null; // noop
  }

  componentDidMount() {
    const stats = new Stats();
    stats.showPanel(0);
    this.refs.stats.appendChild(stats.dom);

    const animate = () => {
      stats.begin();
      this.props.rafFn();
      stats.end();
      this.rafPointer = requestAnimationFrame(animate);
    };
    this.rafPointer = requestAnimationFrame(animate);
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.rafPointer);
  }

  render() {
    return (
      <div ref="stats">
        {this.props.children}
      </div>
    );
  }
}
MonitoredStory.displayName = 'MonitoredStory';
MonitoredStory.propTypes = {
  children: React.PropTypes.node.isRequired,
  rafFn: React.PropTypes.func,
};

export default MonitoredStory;

package.json

{
  "dependencies": {
    "stats.js": "^0.16.0"
  }
}