Skip to content

Commit

Permalink
add docs and update deps
Browse files Browse the repository at this point in the history
  • Loading branch information
mobz committed Apr 19, 2024
1 parent 4b2249c commit 9308b40
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 19 deletions.
27 changes: 16 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
# LagRadar

> It's a sexy little component for demonstrating performance - or lack of in your javascript application.
> It's a sexy little component for demonstrating performance - or lack of - in your javascript application.
Add this to any javascript application and you can see when the app drops below
Add this to any javascript application to see how responsive it is. You can see when the app drops below
60fps as the radar sweep changes colour and gets janky.

[Get your live demo](https://mobz.github.io/lag-radar/)
[Extra awesome as Bookmarklet](https://mobz.github.io/lag-radar/bookmarklet.html)
```
npm i lag-radar
```

* [Get your live demo](https://mobz.github.io/lag-radar/)
* [Extra awesome as Bookmarklet](https://mobz.github.io/lag-radar/bookmarklet.html)
* [Wrapped in a convenient react component](https://www.npmjs.com/package/@gaearon/lag-radar)
* [Add it to storybook](https://storybook.js.org/addons/storybook-addon-lag-radar)

## Usage

The radar is published as a zero dependency es6 javascript module.

```javascript

import lagRadar from './lag-radar.js';
import lagRadar from 'lag-radar';

const destroy = lagRadar({
frames: 50, // number of frames to draw, more = worse performance
Expand All @@ -30,16 +36,15 @@ destroy();

It also exposes css class hooks for styling the radar

### To run the demo
### To run the demo locally

```
npm install
npm start
open http://localhost:9080/
npx http-server
open http://localhost:8080/
```

## Genesis

This version authored by [@mobz](https://twitter.com/mobz) with ideas and contributions [from others](https://twitter.com/dan_abramov/status/970028229271670784)
This version authored by [@mobz](https://github.com/mobz) with ideas and contributions [from others](https://twitter.com/dan_abramov/status/970028229271670784)
for [this talk](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html)
by [@dan_abramov](https://twitter.com/dan_abramov) and shared to the world with love.
by [dan abramov](https://danabra.mov/) and shared to the world with love.
16 changes: 8 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{
"name": "lag-radar",
"version": "0.1.0",
"description": "Trace frame rate lag with a sexy performance radar",
"repository": "github:mobz/lag-radar",
"version": "0.2.0",
"description": "Trace responsiveness and frame rate lag with a sexy performance radar",
"repository": {
"type": "git",
"url": "git+https://github.com/mobz/lag-radar.git"
},
"main": "lag-radar.js",
"scripts": {
"start": "static-server"
"start": "npx http-server"
},
"author": "@mobz",
"license": "ISC",
"devDependencies": {
"static-server": "^2.2.0"
}
"license": "ISC"
}

0 comments on commit 9308b40

Please sign in to comment.