ResizeTooltip Edit

ResizeTooltip displays the dimensions of an element whenever the width or height of the element changes.

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.

Top ↑

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.

Top ↑

Props

Top ↑

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

Top ↑

fadeTimeout

Duration (in ms) before the label disappears after resize event.

  • Type: Number
  • Required: No
  • Default: 180

Top ↑

isVisible

Determines if the label can render.

  • Type: Boolean
  • Required: No
  • Default: true

Top ↑

labelRef

Callback Ref for the label element.

  • Type: Function
  • Required: No

Top ↑

onMove

Callback function when the (observed) element resizes, specifically with a mousemove based event.

  • Type: Function
  • Required: No

Top ↑

onResize

Callback function when the (observed) element resizes.

  • Type: Function
  • Required: No

Top ↑

position

The positions for the label.

  • Type: String
  • Required: No
  • Default: corner
  • Values: bottom | corner

Top ↑

showPx

Renders a PX unit suffix after the width or height value in the label.

  • Type: Boolean
  • Required: No
  • Default: true

Top ↑

zIndex

The z-index style property for the label.

  • Type: Number
  • Required: No
  • Default: 1000