JSPM

react-mops

1.0.0

ESM via JSPM
ES Module Entrypoint
Export Map
Keywords
License
Repository URL
TypeScript Types
README

Created 6 years ago
Published 6 years ago
Downloads 1075
Score
MPQF
License MIT

Modify Orientation Position Size

Package Exports

react-mops

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-mops) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>
    );
}