react-morphable v1.0.0

React-Morphable

View the Demo

A simple div that can be resized, rotated and / or dragged.

You can either use the <Morphable> element directly, without taking care about the position / size / rotation state of the div (while still getting access to it), or <MorphableCore> if you want the control of position / size / rotation state.

Installation

Using npm:

$ npm install --save react-morphable

Usage

import { Morphable, MorphableCore } from 'react-morphable';

render() {
  return (
    <Morphable>
      // children
    </Morphable>
  );

  // or

  return (
    <MorphableCore
      position={this.state.position}
      size={this.state.size}
      rotation={this.state.rotation}
    >
      // children
    </MorphableCore>
  );

}

Props

These props apply only to <MorphableCore>.

These props apply to both <MorphableCore> and <Morphable>. Note regarding CSS classes : react-morphable uses React-JSS, therefore it's not feasible to edit directly the class of a div as the class name is not fixed. That's why the prop classProps has been added (classes prop is already taken by react-JSS, we couldn't use it), thanks to which you can give any class name you want to any HTML element inside react-morphable, allowing to customize anything.

To-do

• styles
• classes
• bounds for drag
• bounds for resize
• minimum height, minimum width
• accessibility
• refactoring ?