React-resize-zoom NPM

react-resize-zoom

English | 中文说明

Introduction?

Element scaling without affecting the style of the wrapped element

featrues

Support for scaling the size of div elements, providing flexible API controls for scaling edges or corners
Other properties of the wrapped props.children (properties that are not draggResize related) are not affected by react-resize-zoom. It's still the same as not being wrapped

Matters

The child element cannot be an inline element;
props. Children limited to a single closed tag!

install

npm install --save react-resize-zoom
# or
yarn add react-resize-zoom

example

import DragResize from 'react-resize-zoom';

<DragResize>
    <div style={{ width: '50px', height: "50px", background: "red" }}>
        大小拖放
    </div>
</DragResize>

Attributes

name	type	defaultValue	description
direction	`['e', 'w', 's', 'n', 'ne', 'nw', 'se', 'sw']`	-	Allows control of drag edges or corners
forbid	`boolean`	-	forbid scaling
width	`number`	-	width
height	`number`	-	height
offset	`number`	`10`	How far from the edge can be dragged
onResizeStart	`function`	-	Drag scaling the start event;
onResizeMoving	`function`	-	Drag scaling events
onResizeEnd	`function`	-	Drag scaling end the event
fixed	`boolean`		Is the width and height fixed when it is an uncontrolled component
childProps	`any`	`props.children`	children's props
ref	`{current: HtmlElement}`	`props.children`	The ref of the child element