@exodus/heat-map-view
v1.0.14
Published
Heat up performance offenders!
Downloads
4,639
Maintainers
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
yarn add @exodus/heat-map-view
Usage
Import initHeatMapView
import { initHeatMapView } from '@exodus/heat-map-view'
Initialize it in App.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
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
const styles = StyleSheet.create({
heatMapViewEmergency: {
position: 'absolute',
height: 30,
width: 50,
backgroundColor: 'transparent',
left: dimensionsWidth / 2 - 25,
top: getStatusBarHeight(),
},
})
function HeatMapViewToggle() {
return (
<TouchableOpacity
style={styles.heatMapViewEmergency}
onPress={() => {
if (isHeatMapViewInstalled()) {
uninstallHeatMapView()
} else {
installHeatMapView()
}
}}
/>
)
}
Roadmap
- [ ] Dynamic heat style provider
- [ ] Heat by velocity (Friction)
- [x] Include example