The "default" prop of the Draggable component is it's position value, and can be changed to actually set the final position after the dragging.
Turning your component into a resizable component
import { Resizable } from 'react-transforming';
export default class App extends PureComponent {
state = {
width: 50,
height: 50,
};
handleResizeStop = (e, size) =>{
this.setState({
...size,
});
}
render(){
return(
<Resizable
default={this.state}
onResizeStop={this.handleResizeStop}
>
<MyComponent />
</Resizable>
);
}
}
The "default" prop of the Draggable component is it's size value, and can be changed to actually set the final size after the resizing.
Composing the components to get a more complex behavior
import { Draggable, Resizable } from 'react-transforming';
export default class App extends PureComponent {
state = {
x: 10,
y: 10,
width: 50,
height: 50,
};
handleDragStop = (e, pos) =>{
this.setState({
...pos,
});
}
handleResizeStop = (e, size) =>{
this.setState({
...size,
});
}
render(){
const { x, y, width, height } = this.state;
return(
<Draggable
default={{x, y}}
onDragStop={this.handleDragStop}
>
<Resizable
default={{width, height}}
onResizeStop={this.handleResizeStop}
>
<MyComponent />
</Resizable>
</Draggable>
);
}
}
You could pass the whole state to both default props in the Draggable and Resizable components, but we encourage to pass just the necessary to avoid unexpected side effects.
If you're missing some feature, or want to suggest some improvement, you can report an issue or create a pull request, I'll be happy to take a look 😎.