react-transform-layer
use with react, it works like free transform layer of photoshop-like...
USAGE
;; ; state = w: 100 // Positioner's width h: 100 // Positioner's height x: 50 // Positioner's x of coordinates y: 50 // Positioner's y of coordinates z: 1000 // Positioner's z-index e: true // Positioner's boolean value of editable ; this; { const state = this; const w h x y z e = state; return <div> <Positioner w=w h=h x=x y=y z=z mw=50 mh=50 draggable=e onFinish=thisposition color="red"> <div style= width: "100%" height: "100%" backgroundColor: "#cccccc" /> </Positioner> </div> ; } ;
-
import default of "react-transform-layer"
-
give props
w, h, x, y, z, mw, mh, draggable, onFinish, color
as above code block -
w stands for 'width' (required number)
-
h stands for 'height' (required number)
-
x means for 'x of coordinates' (required number)
-
y means for 'y of coordinates' (required number)
-
mw stands for 'minimum width' (required number)
-
mh stands for 'minimum height' (required number)
-
draggable is boolean that you can drag and change its poistion (nullable boolean, default false)
-
onFinish is callback function called when you release the mouse drag and its changes of poistion will committed (required function)
-
color will be accepted into positioner's eight anchors as inline style. eg. red, blue, rgba(0, 255, 0, 0.6), #ff0000 (nullable string)