A lightweight React hook for adding snapping functionality to Konva.js elements. It allows objects to snap to stage borders, center, and other shapes, with customizable guidelines and snapping sensitivity.
npm install use-konva-snapping
use-konva-snapping, you can use npm or yarn:
bash
npm install use-konva-snapping
`
$3
`bash
yarn add use-konva-snapping
`
---
Usage
Once installed, you can use the useKonvaSnapping hook to enable snapping for Konva elements in your React app. Here's how to set it up:
$3
Import the useKonvaSnapping hook into your React component.
`javascript
import { useKonvaSnapping } from "use-konva-snapping";
`
$3
Use the hook to get the snapping functionality and attach it to your Konva elements. Below is an example of a basic implementation where you can add draggable shapes and make them snap to the stage and other shapes.
`javascript
"use client";
import React, { useRef, useState } from "react";
import {
Stage,
Layer,
Rect,
Circle,
RegularPolygon,
Transformer,
} from "react-konva";
import { useKonvaSnapping } from "use-konva-snapping";
const App = () => {
const transformerRef = useRef(null); // Initialize transformerRef
const [shapes, setShapes] = useState([
{
type: "rect",
x: 60,
y: 160,
width: 100,
height: 50,
fill: "red",
draggable: true,
},
{
type: "rect",
x: 260,
y: 260,
width: 100,
height: 50,
fill: "red",
draggable: true,
},
{
type: "circle",
x: 200,
y: 100,
radius: 40,
fill: "green",
draggable: true,
},
{
type: "triangle",
x: 300,
y: 150,
radius: 50,
sides: 3,
fill: "blue",
draggable: true,
},
]);
const { handleDragging, handleDragEnd, handleResizing, handleResizeEnd } =
useKonvaSnapping({
guidelineColor: "blue",
guidelineDash: true,
snapToStageCenter: true,
snapRange: 5,
guidelineThickness: 1,
showGuidelines: true,
snapToShapes: true,
snapToStageBorders: true,
});
const handleSelect = (e) => {
transformerRef.current.nodes([e.target]);
};
return (
{shapes.map((shape, index) => {
if (shape.type === "rect") {
return (
key={index}
x={shape.x}
y={shape.y}
width={shape.width}
height={shape.height}
fill={shape.fill}
draggable={shape.draggable}
onDragMove={handleDragging}
onDragEnd={handleDragEnd}
onClick={handleSelect}
/>
);
}
if (shape.type === "circle") {
return (
key={index}
x={shape.x}
y={shape.y}
radius={shape.radius}
fill={shape.fill}
draggable={shape.draggable}
onClick={handleSelect}
onDragMove={handleDragging}
onDragEnd={handleDragEnd}
/>
);
}
if (shape.type === "triangle") {
return (
key={index}
x={shape.x}
y={shape.y}
radius={shape.radius}
sides={shape.sides}
fill={shape.fill}
draggable={shape.draggable}
onClick={handleSelect}
onDragMove={handleDragging}
onDragEnd={handleDragEnd}
/>
);
}
return null;
})}
ref={transformerRef}
onTransform={handleResizing}
onTransformEnd={handleResizeEnd}
keepRatio={false}
/>
);
};
export default App;
`
$3
$3
#### Parameters:
- snapRange: (default: 3) Distance in pixels for snapping sensitivity.
- guidelineColor: (default: "rgb(0, 161, 255)") Color of the snapping guidelines.
- guidelineDash: (default: true) Whether the guidelines should be dashed.
- showGuidelines: (default: true) Whether the guidelines should be displayed.
- guidelineThickness: (default: 1) Thickness of the guidelines.
- snapToStageCenter: (default: true) Whether to snap to the center of the stage.
- snapToStageBorders: (default: true) Whether to snap to the edges of the stage.
- snapToShapes: (default: true) Whether to snap to other shapes on the stage.
#### Methods Returned:
- handleDragging: Attach this method to onDragMove of Konva elements.
- handleResizing: Attach this method to onResize of Konva Transformer.
- handleDragEnd: Attach this method to onDragEnd of Konva elements.
- handleResizeEnd: Attach this method to onResizeEnd` of Konva Transformer.