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