react-alignment-guides

React Alignment Guides is a guides system for draggable elements in an enclosed space

Usage no npm install needed!

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

README

react-alignment-guides

React Alignment Guides is a guides system for draggable elements in an enclosed space

NPM JavaScript Style Guide

Install

NPM

npm install --save react-alignment-guides

Yarn

yarn add react-alignment-guides

Usage

import React, { Component } from 'react'

import AlignmentGuides from 'react-alignment-guides'

class Example extends Component {
  render () {
    return (
      <AlignmentGuides {...props} />
    )
  }
}

Props

Prop Required Default Description
boxes true [] An array of box objects
boxStyle false {} Styles to be applied to the boxes. It should follow the convention described here.
className false empty string CSS classes. Note: Do not override position
onDragStart false Function to call when drag starts
onDrag false Function to call during drag
onDragEnd false Function to call when drag ends
onKeyUp false Function to call for keystrokes
onResizeStart false Function to call when resize starts
onResize false Function to call during resize
onResizeEnd false Function to call when resize ends
onSelect false Function to call when a box is clicked
onUnselect false Function to call when a box goes inactive
onSecondaryClick false Function to call when right clicking on single or multiple boxes
resolution false null Resolution to which you want to scale the boxes to. For example, the bounding box can be 1280x720 but you can display the coordinates and dimensions relative to 1920x1080. In this case, resolution would be set to { width: 1920, height: 1080 }.
style false null Styles to be applied to the component. It should follow the convention described here. Note: Do not override position

Box object

Prop Default Description
drag true Boolean. Allow or disallow dragging for this box
resize true Boolean. Allow or disallow resizing for this box
rotate true Boolean. Allow or disallow rotating for this box
x Number
y Number
left Number
top Number
width Number
height Number
rotateAngle Number in the range -180 to 180

License

Apache-2.0 © Rocketium