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 |

License

Apache-2.0 © Rocketium