react-alignment-guides's Introduction

react-alignment-guides

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

Install

NPM

npm install --save 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