# react-canvas-stats

> JavaScript Performance Monitor

Latest version **0.4.0** (published 2018-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-canvas-stats
pnpm add react-canvas-stats
yarn add react-canvas-stats
bun add react-canvas-stats
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2018-12-31 |
| First published | 2018-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | pailhead |
| Maintainers | pailhead |
| Keywords | performance, fps, stats, react |

## Links

- npm: https://www.npmjs.com/package/react-canvas-stats
- Repository: https://github.com/pailhead/stats.js
- Issues: https://github.com/pailhead/stats.js/issues
- npm.io page: https://npm.io/package/react-canvas-stats

## Dependencies (1)

- [window-or-global](https://npm.io/package/window-or-global.md) ^1.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2018-12-31
- 0.2.4 — 2018-04-24
- 0.2.3 — 2018-04-22
- 0.2.2 — 2018-04-22
- 0.2.1 — 2018-04-22
- 0.2.0 — 2018-04-22
- 0.1.1 — 2018-04-21
- 0.1.0 — 2018-04-21
- 0.0.6 — 2018-04-20
- 0.0.5 — 2018-04-20
- 0.0.4 — 2018-04-20
- 0.0.2 — 2018-04-20
- 0.0.1 — 2018-04-20

## README

react-canvas-stats
========

#### React version of stats.js ####

Please see [the original](https://github.com/mrdoob/stats.js) for a better idea of what this does. There's another react version of this but it hasn't been updated in a long time and renders this with the dom. 

### Usage ###

[![NPM](https://nodei.co/npm/react-canvas-stats.png)](https://npmjs.org/package/react-canvas-stats)

Only the `MS` and `FPS` panels are available.

Pass a timestamp prop to the component when update needs to occur.


```javascript


import Stats from 'react-canvas-stats'


class Foo extends Component {

	state={ timestamp: null }
	
	//an example how to add the memory panel
    constructor() {
        super()

        const memory = window.performance && window.performance.memory

        if (memory) {
            this._extraPanels = [
                {
                    name: 'MB', 
                    fg: '#f08',
                    bg: '#201',
                    maxValue: memory.jsHeapSizeLimit / 1048576,                 //you have to provide this for scale
                    updateOnType: 'fps', 										//this feels a bit clunky, there are two update types
                    updateCallback: val => memory.usedJSHeapSize / 1048576      //a function to transform the value (you dont have to you can also just compute whatever you want), val input val output
                }
            ]
        }
    }

	onSomeUpdate = ()=>{
		this.setState({timestamp: Date.now()})
	}

	render(){
		<div>
			<Stats
				timestamp={this.state.timestamp} extraPanels={this._extraPanels}
			/>
		</div>
	}
}

```
### NOTES ###

`Stats.js` has been refactored. The idea is to have it not coupled with the dom, nor the panel instances for that matter. It's responsibilities should be:
- Figure out which `now()` is available.
- Compute miliseconds
- Compute frame rate.
- (memory has been nuked)

The `react` side of things is relying heavily on timestamps. It feels kinda weird but it works. This seems to be an obvious way to trigger a change. For the main component, only the stamp of the last update is needed. The panel's seemed to each need their own, since the numbers could be the same (60fps over and over again) and it seemed like this change wouldn't register and the graph wouldn't progress. Hence both the value prop, and the time of last update. 

### TODO ###

- research how to publish this. I don't understand how it should be bundled for npm.

---
_Source: https://npm.io/package/react-canvas-stats · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._