ResizeTooltip 
Edit
ResizeTooltip displays the dimensions of an element whenever the width or height of the element changes.
Usage Usage
const Example = () => {
return (
<div style={ { position: 'relative' } }>
<ResizeTooltip />
...
</div>
);
};
Be sure that the parent element containing <ResizeTooltip /> has the position style property defined. This is important as <ResizeTooltip /> uses position based techniques to determine size changes.
Positions Positions
<ResizeTooltip /> has three positions;
bottom(Default)corner
bottom
The bottom position (default) renders the dimensions label at the bottom-center of the (parent) element.
corner
The corner position renders the dimensions label in the top-right corner of the (parent) element.
Props Props
axis axis
Limits the label to render corresponding to the axis. By default, the label will automatically render based on both x and y changes.
- Type:
String - Required: No
- Values:
x|y
fadeTimeout fadeTimeout
Duration (in ms) before the label disappears after resize event.
- Type:
Number - Required: No
- Default:
180
isVisible isVisible
Determines if the label can render.
- Type:
Boolean - Required: No
- Default:
true
labelRef labelRef
Callback Ref for the label element.
- Type:
Function - Required: No
onMove onMove
Callback function when the (observed) element resizes, specifically with a mousemove based event.
- Type:
Function - Required: No
onResize onResize
Callback function when the (observed) element resizes.
- Type:
Function - Required: No
position position
The positions for the label.
- Type:
String - Required: No
- Default:
corner - Values:
bottom|corner
showPx showPx
Renders a PX unit suffix after the width or height value in the label.
- Type:
Boolean - Required: No
- Default:
true
zIndex zIndex
The z-index style property for the label.
- Type:
Number - Required: No
- Default:
1000