React Alignment Guides is a guides system for draggable elements in an enclosed space
npm install react-alignment-guides> React Alignment Guides is a guides system for draggable elements in an enclosed space
 
bash
npm install --save react-alignment-guides
`Usage
jsx
import React, { Component } from 'react'import AlignmentGuides from 'react-alignment-guides'
class Example extends Component {
render () {
return (
)
}
}
`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 _ |
| 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 |Apache-2.0 © Rocketium