ReactJS Free Transform Tool

ReactJs component for resizing, dragging and rotating html elements using css transform matrix

Demo

https://codesandbox.io/s/k0nozy8nyo

Installation

npm install react-free-transform

Usage

importFreeTransformfrom'react-free-transform'

<FreeTransformx={0}y={0}width={100}height={100}scaleX={1}scaleY={1}angle={0}classPrefix="tr"disableScale={false}// scale the content or just the content arearotateEnabled={true}// add/remove the rotation handletranslateEnabled={true}// add/remove draggingscaleEnabled={true}// add/remove scaling handlesscaleHandles={['corners','sides']}// equivalent to ['tl', 'ml', 'tr', 'tm', 'mr', 'bl', 'bm', 'br']open={true}// enable/disable the transformer easily// general eventsonUpdate={({x, y, scaleX, scaleY})=>{}}onTransformStart={(event)=>{}}onTransformEnd={(event)=>{}}// fallback to onUpdateonTranslate={({x, y, scaleX, scaleY})=>{}}onRotate={({x, y, scaleX, scaleY})=>{}}onScale={({x, y, scaleX, scaleY})=>{}}// fallback to onTransformStartonTranslateStart={(event)=>{}}onRotateStart={(event)=>{}}onScaleStart={(event)=>{}}// fallback to onTransformEndonTranslateEnd={(event)=>{}}onRotateEnd={(event)=>{}}onScaleEnd={(event)=>{}}><imgsrc="..."/></FreeTransform>

CSS

.tr-transform__rotator {
top:-45px;
left:calc(50%-7px);
}
.tr-transform__rotator,
.tr-transform__scale-point {
background:#fff;
width:15px;
height:15px;
border-radius:50%;
position: absolute;
box-shadow:02px4px0rgba(0,0,0,0.1);
border:1px solid rgba(0,0,0,0.1);
cursor: pointer;
}
.tr-transform__rotator:hover,
.tr-transform__scale-point:hover{
background:#F1F5F8;
}
.tr-transform__rotator:active,
.tr-transform__scale-point:active{
background:#DAE1E7;
}

Keyboard shortcuts

shift for aspect ratio resizing

alt for scaling from center

shift while rotation will snap rotation using 15 degrees