react-mops

M.O.P.S.

Modify Orientation Position Size

German >> English: Mops >> Pug
it moves, it stretches, it rolls around

• Value Proposition
• Features
• Installation
• Docs
  • Basic Examples
• Demo
  • Live
  • Screen recordings

Value Proposition

M.O.P.S aims to provide a component that allows various transformations to an Element as seen in design software like Photoshop, Sketch any many others.

Features

(implemented / planned)

• <Guides/> component
• Resize
  • Alt key: resize left/right, top/bottom or all directions for corners
  • Shift key: retain aspect-ratio
  • Snapping
  • Touch support
  • Keyboard support
• Rotate
  • Meta key: activate rotation
  • Shift key: rotate in steps of 15 deg
  • Snapping
  • Touch support
  • Keyboard support
• Drag
  • Snapping
  • Touch support
  • Keyboard support

Installation

NPM

npm install react-mops --save-dev

Yarn

yarn add react-mops

Docs

This an extracted component.

Tests and documentation has not been written yet. Please look at the examples for now

Basic Examples

import {Box} from "react-mops";
 
const wrapperStyle = {
    position: "relative",
    height: 500,
    width: 500,
    boxShadow: "0 0 0 1px black"
};
const App = () => {
    return (
        <div style={wrapperStyle}>
            <Box isResizable>
                Resize me!
            </Box>
            <Box isRotatable>
                Rotate me!
            </Box>
            <Box isDraggable>
                Drag me!
            </Box>
            <Box isResizable isRotatable isDraggable>
                I can do it all!
            </Box>
        </div>
    );
}

Demo

Code Sandbox

https://codesandbox.io/s/react-mops-4cwhx

Live

https://react-mops.netlify.com

Screen recordings

Resizable

Rotatable

Draggable

Combined

Pug icons created by freepik - www.freepik.com;