react-drag-guide-lines

React drag guide lines

A React Library to enable draglines for perfect placement of draggable items

You can check the demo here

Usage

using npm

npm i -S react-drag-guide-lines

using yarn

yarn add -S react-drag-guide-lines

Parent Component

Add the following import to your parent component

Parent import

import { ReactAlignLinesContainer } from 'react-drag-guide-lines';

Parent code

instead of your parent you can wrap your draggable children with the following code

return (
  <ReactAlignLinesContainer styles={{...yourprops}}>
    {draggableComponents.map(item => <YourComponent {...props}>)}
  </ReactAlignLinesContainer>
)

Parent Props

Title	About	Required	type	Values	Default Values
emptyState	Empty state component if there are no children, shows up when showEmptyState is true or children is empty list	true	ReactNode	ReactNode	undefined
showEmptyState (depricated)	boolean to check if we need to show empty state or not	false	boolean	true, false	false
limit	Limit the lines to the boundaries	false	boolean	true, false	false
styles	Styles for the wrapper, horizontal Lines and Vertical Lines	false	styles	values	undefined
directions	when the item is dragged it specifies when to show the draglines	false	string[]	sub array of ['tt', 'bb', 'll', 'rr', 'hc', 'wc', 'lr', 'rl', 'tb', 'bt']	['tt', 'bb', 'll', 'rr', 'hc', 'wc', 'lr', 'rl', 'tb', 'bt'] more here

Styles

Styles required to pass from parent for different styles like backgroundColor, width or height

Type

{
  wrapper?: React.CSSProperties,
  xLineStyle?: React.CSSProperties,
  yLineStyle?: React.CSSProperties,
}

Default Values

{
  wrapper: { ...wrapperStyles },
  xLineStyle: { ...horizontalStyles },
  yLineStyle: { ...verticalStyles },
}

Directions

directions is a collection of array which specifies when to show the drag lines.

values are collection of the bottom options provided.

possible values

option	explanation
tt	top of the dragging element and top of the relative elements
bb	bottom of the dragging element and bottom of the relative elements
ll	left side of the dragging element and left of the relative elements
rr	right side of the dragging element and right of the relative elements
hc	center of heights of dragging element and the relative elements
wc	center of widths of dragging element and the relative elements
lr	left of the dragging element and the right of the relative element
rl	right of the dragging element and the left of the relative elements
tb	top of the dragging element and the bottom of the relative element
bt	bottom of the dragging element and the top of the relative element

example

directions: ['tt', 'bb', 'll', 'rr', 'hc', 'wc', 'lr', 'rl', 'tb', 'bt']

Child Component

import

import { IDragOperations } from 'react-drag-guide-lines';

Props

to your props you can add a new Prop dragOperations with IDragOperations as type

interface IChildProps {
  // your props
  dragOperations?: IDragOperations
}

Child Code

add data-x and data-y props to your child props and use the functions of IDragOperations appropriately

const ChildComponent = (props: IChildProps) => {
  const {  dragOperations, ...rest } = props;

  // call this function when you end dragging
  const handleDragEnd = () => {
        // your code
        dragOperations?.onDragStop();
    };

    // call this function when you start dragging
    const handleDragStart = () => {
        // Your code
        dragOperations?.onDragStart();
    };

    // call this function when you are dragging
    const handleDragging = () => {
        // Your code
        // dragX - difference between current x position and previous x position
        // dragY - difference between current y position and previous y position
        dragOperations?.onDrag({ x: dragX, y: dragY });
    };

    return (
        <DragComponent
          // your props
          data-x={currentXPosition}
          data-y={currentYPosition}
        />
    );
}

export default ChildComponent;

You can check the example code here