├── .gitignore
├── README.md
├── Radar.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Lag Radar
 2 | 
 3 | [Lag Radar](https://mobz.github.io/lag-radar/) developed by [Ben Birch](https://github.com/mobz), wrapped into a React component for convenience.
 4 | 
 5 | You can use it in development to track whether your app is responsive or is dropping frames. Particularly neat for demos of [React 18 `startTransition`](https://github.com/reactwg/react-18/discussions/41). For example, see [this demo](https://swizec.com/blog/a-better-react-18-starttransition-demo/).
 6 | 
 7 | (Note: React 18 is still in alpha and [will be for a while](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html).)
 8 | 
 9 | ```
10 | npm install react-lag-radar
11 | ```
12 | 
13 | ## Usage
14 | 
15 | ```js
16 | import LagRadar from 'react-lag-radar';
17 | 
18 | <LagRadar />
19 | 
20 | <LagRadar size={100} />
21 | 
22 | <LagRadar
23 |   frames={20}
24 |   speed={0.0017}
25 |   size={100}
26 |   inset={3}
27 | />
28 | ```
29 | 
30 | ## License
31 | 
32 | ISC
33 | 


--------------------------------------------------------------------------------
/Radar.js:
--------------------------------------------------------------------------------
 1 | import {useLayoutEffect, useRef, createElement, memo} from 'react'
 2 | import lagRadar from "@gaearon/lag-radar";
 3 | 
 4 | export default memo(function Radar(props) {
 5 |   // Tweak the defaults
 6 |   let frames = props.frames || 20;
 7 |   let size = props.size || 100;
 8 |   let options = Object.assign({}, props, {
 9 |     frames,
10 |     size,
11 |   });
12 |   let ref = useRef();
13 |   useLayoutEffect(() => {
14 |     let destroy = lagRadar(Object.assign({}, options, {
15 |       parent: ref.current,      
16 |     }));
17 |     return destroy;
18 |   }, [options, ref]);
19 |   return createElement('div', {ref});
20 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-lag-radar",
 3 |   "version": "1.0.0",
 4 |   "description": "A radar that visualizes dropped frames and performance issues",
 5 |   "main": "Radar.js",
 6 |   "files": [
 7 |     "Radar.js"
 8 |   ],
 9 |   "dependencies": {
10 |     "@gaearon/lag-radar": "^0.1.0"
11 |   },
12 |   "peerDependencies": {
13 |     "react": "*"
14 |   },
15 |   "author": "@mobz, @gaearon",
16 |   "license": "ISC"
17 | }
18 | 


--------------------------------------------------------------------------------