react-morphable

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

Prop	Type	Default
position	{ width: number, height: number }	{ width: 150, height: 150 }
size	{ x: number, y: number }	{ x: 0, y: 0}
rotation	number	0

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.

Prop	Type	Default
children	React.Element	any
isMorphable	bool	true
lockAspectRatio	bool	false
disableDrag	bool	false
disableResize	bool	false
disableRotation	bool	false
disableGuides	bool	true
disableBounds	{forDrag: forResize: true}	{forDrag: true, forResize: true (always, not yet set-up)}
bounds	{top: left: bottom: right: }	{ top: 0, left: 0, bottom: 0, right: 0 }
magnetismGrids	{ drag: resize: rotation: }	{ drag: 5, resize: 5, rotation: 5 }
debug	bool	false
onHandleMouseDown	func({ e })	void
onDragStart	func({ e })	void
onDrag	func({ e, x, y })	void
onDragStop	func({ e })	void
onResizeStart	func({ e })	void
onResize	func({ e, x, y, width, height })	void
onResizeStop	func({ e })	void
onRotateStart	func({ e })	void
onRotate	func({ e, rotation })	void
onRotateEnd	func({ e })	void
styles	{ root: , rootTransformed: , corner: , topLeftCorner: , topRightCorner: , bottomLeftCorner: , bottomRightCorner: , middleTopCorner: , middleRightCorner: , middleBottomCorner: , middleLeftCorner: , middleTopAboveCorner: }	void
classProps	{ root: , rootTransformed: , corner: , topLeftCorner: , topRightCorner: , bottomLeftCorner: , bottomRightCorner: , middleTopCorner: , middleRightCorner: , middleBottomCorner: , middleLeftCorner: , middleTopAboveCorner: }	void

To-do

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