Skip to content
📊Stats: Easy performance monitoring for JavaScript / React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
.vscode
images
src
stories
.babelrc
.eslintignore
.eslintrc
.gitignore
.nvmrc
.prettierignore
.prettierrc.yml
.travis.yml
LICENSE
README.md
jest.config.js
package-lock.json
package.json
tsconfig.json

README.md

📊 Stats

Build Status npm version

Easy performance monitoring for JavaScript / React

Stats

Table of Contents

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!

You can’t perform that action at this time.