https://github.com/exodusmovement/heat-map-view
Heat up performance offenders
https://github.com/exodusmovement/heat-map-view
Last synced: about 1 year ago
JSON representation
Heat up performance offenders
- Host: GitHub
- URL: https://github.com/exodusmovement/heat-map-view
- Owner: ExodusMovement
- License: mit
- Created: 2022-09-02T13:59:51.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T19:56:47.000Z (almost 2 years ago)
- Last Synced: 2025-03-27T17:51:40.429Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 2.44 MB
- Stars: 44
- Watchers: 13
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `Heat Map View`
> Heat up performance offenders! 🔥
HeatMapView helps us detect frequently re-rendered views without having phone connected to computer at all times.
A significant portion of React performance issues are caused by unnecessary re-renders. This library enables us to observe components which are re-rendered too frequently in real time.
## Installation
```sh
yarn add @exodus/heat-map-view
```
## Usage
Import `initHeatMapView`
```js
import { initHeatMapView } from '@exodus/heat-map-view'
```
Initialize it in `App.js`
```js
useEffect(
() => {
if (ready) {
if (__DEV__) {
initHeatMapView({
enabled: true,
divisor: 20,
dynamicOpacity: false,
overlayStyle: {
borderWidth: 1,
borderColor: 'white',
},
surface: 'floor',
skipInstances: 1,
opacity: 0.5,
})
}
}
},
[ready]
)
```
## Config
| Prop | Default | Params Type | Description |
| --- | --- | --- | --- |
| divisor | 30 | number | Render count divisor. Heat is calculated by `renderCount / divisor` = [0-1]. 0 - Blue, 1 - Red. |
| dynamicOpacity | false | boolean | Heat makes view less transparent. If enabled 0 - Fully transparent, 1 - Fully opaque.|
| opacity | 0.5 | number | HeatMap overlay opacity. Disabled if `dynamicOpacity === true` |
| minHeat | 0 | number | Minimum heat value to be visible. |
| maxHeat | -1 | number | Maximum heat value to be visible. -1 equals infinity. |
| overlayStyle | {} | object | Custom overlay style. |
| surface | 'floor' | `'floor'\|'ceiling'` | Should heatmap draw on top or bottom of the component. |
| skipInstances | 2 | number | Skips initial number view instances. |
## Disable/Enable HeatMapView in runtime
```js
import {
initHeatMapView, // Initializes and enables HeatMapView
installHeatMapView, // Enables HeatMapView
uninstallHeatMapView, // Disables HeatMapView
isHeatMapViewInstalled, // Check if HeatMapView is enabled
} from '@exodus/heat-map-view'
```
Create Heat Map toggler
```js
const styles = StyleSheet.create({
heatMapViewEmergency: {
position: 'absolute',
height: 30,
width: 50,
backgroundColor: 'transparent',
left: dimensionsWidth / 2 - 25,
top: getStatusBarHeight(),
},
})
function HeatMapViewToggle() {
return (
{
if (isHeatMapViewInstalled()) {
uninstallHeatMapView()
} else {
installHeatMapView()
}
}}
/>
)
}
```
## Roadmap
- [ ] Dynamic heat style provider
- [ ] Heat by velocity (Friction)
- [x] Include example