React Transforming
See Demo
See Example
See API.md for details
Requirements
- React >= 16.0.0
Install
yarn add react-transforming
Turning your component into a draggable component
import { Draggable } from 'react-transforming';
export default class App extends PureComponent {
state = {
x: 10,
y: 10,
};
handleDragStop = (e, pos) => {
this.setState({
...pos,
});
}
render() {
return (
<Draggable
default={this.state}
onDragStop={this.handleDragStop}
>
<MyComponent />
</Draggable>
);
}
}
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.