react-rubber
v0.0.4
Published
Someting can be dragged and resized.
Downloads
10
Readme
react-rubber
Someting can be dragged and resized;
Installation
npm install --save react-rubber
API
Drag
- onMoveStart:
PropTypes.func
.Trigger whenonMouseDown
. - onMove:
PropTypes.func
.Trigger betweenonMouseDown
andonMouseUp
. - onMoveEnd:
PropTypes.func
.Trigger whenonMouseUp
.
/**
* obj = {
* x: PropTypes.number,
* x: PropTypes.number,
* offsetX: PropTypes.number,
* offsetY: PropTypes.number,
* }
*/
onMove = (obj = {}) => {
console.log(obj);
}
Box
- title:
PropTypes.node
.The content of the bar you can drag, hide the bar whentitle === null
; - clean:
PropTypes.bool
.Use the default style of Box. Default:false
; - controlled:
PropTypes.bool
.Controlled component or not. Default:false
; - onResize:
PropTypes.func
.Trigger when position or size change; - rect: The state of box;
/**
* rect = {
* top: PropTypes.number,
* left: PropTypes.number,
* width: PropTypes.number,
* height: PropTypes.number,
* }
*/
onResize = (rect = {}) => {
console.log(rect);
}
Mac
Something like the window of mac, base on Box;
- title:
PropTypes.node
.The content of the bar you can drag, hide the bar whentitle === null
; - controlled:
PropTypes.bool
.Controlled component or not. Default:false
; - visible:
PropTypes.bool
.Default:true
; - maximize:
PropTypes.bool
.Default:false
; - onClickClose:
PropTypes.func
; - onClickMin:
PropTypes.func
; - onClickMax:
PropTypes.func
; - onDoubleClickTitle:
PropTypes.func
;
// somethings convenient you can do with Mac;
Mac.open(...macProps)
Mac.close();