react-drag-guide-lines v1.1.1
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'(#directions) |
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago