Nuclear Pumpkin Mocha

    react-transforming

    1.0.5 • Public • Published

    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.

    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 😎.

    Install

    npm i react-transforming

    DownloadsWeekly Downloads

    9

    Version

    1.0.5

    License

    ISC

    Unpacked Size

    145 kB

    Total Files

    8

    Last publish

    Collaborators

    • danilolucasmd