react-transforming
Make your components draggable and resizable in a responsive and scalable way
Last updated 6 months ago by danilolucasmd .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-transforming 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.0.5                                ...           latest (6 months ago)

6 Versions

  • 1.0.5                                ...           6 months ago
  • 1.0.4                                ...           10 months ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 5
Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |