@helpscout/stats v0.0.5

📊 Stats

Easy performance monitoring for JavaScript / React

Table of Contents

• Installation
• Usage
  • JavaScript
  • React
• Graphs
• Options
• Thanks

Installation

Add stats to your project via npm install:

npm install --save @helpscout/stats

Usage

JavaScript

To use Stats in your JavaScript project, simply import it and instantiate!

import createStats from '@helpscout/stats'

const stats = createStats()
// Stats will automatically mount to window.document

// For clean up, execute the destroy() method
stats.destroy()

React

Stats comes with a handy <StatsGraph /> component. To add it to your React project, import it and render it:

import React from 'react'
import {StatsGraph} from '@helpscout/stats'

class App extends React.Component {
  render() {
    return (
      <div>
        ...
        <StatsGraph />
        ...
      </div>
    )
  }
}

export default App

StatsGraph cleans up after itself if it unmounts.

Graphs

• FPS Frames rendered in the last second. The higher the number the better.
• MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)
• NODES Number of DOM nodes in window.document (including iFrame nodes).

Options

Stats accepts a handful of options to adjust it's position and UI.

The React StatsGraph uses the same options for it's defaultProps

Thanks

Thanks for mrdoob for his stats.js library, which inspired this one!