react-morphable

A resizable, rotatable and draggable div as a component for React

Usage no npm install needed!

<script type="module">
  import reactMorphable from 'https://cdn.skypack.dev/react-morphable';
</script>

README

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 ?