@helpscout/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.
| Prop | Type | Default | Description | | -------- | ----------------- | -------- | --------------------------- | | top | number/string | 0 | (CSS) top position. | | right | number/string | 0 | (CSS) right position. | | bottom | number/string | 0 | (CSS) bottom position. | | left | number/string | 0 | (CSS) left position. | | opacity | number | 0.5 | Opacity for the Stats UI. | | position | string | fixed | Position for the Stats UI. | | zIndex | string | 99999999 | z-index for the Stats 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!