interactionpane
v1.0.3
React component for drag, zoom, pinch. Support mouse + scroll wheel and finger gestures for mobile devices.
0/weekUpdated 2 years agoMITUnpacked: 20.2 KB
Published by Jeroen Kloosterman
npm install interactionpaneInteractionPane
Author: Jeroen Kloosterman
Overview
InteractionPane is a React component that allows end users to work with drag, pinch, and zoom using mouse (scrollwheel + mouse buttons) on the desktop as well as hand gestures (pinch/zoom/drag) on mobile devices.
This abstraction alleviates the developer from the complexities associated with handling various mouse and gesture events.
By adding children within the InteractionPane, it becomes responsive to the user's interactions, scaling and moving as required.
Note that the div that the component will take the full space of its parent (it uses attributes left=0, top=0, right=0, bottom=0).
Demonstration Videos
Here are two demonstration videos showcasing the capabilities and usage of InteractionPane:
1. Desktop (using mouse)
2. Mobile (hand gestures)
Installation
npm i interactionpane
Example Usage
``javascript
import InteractionPane from "interactionpane";
import React, { useState } from "react";
function App() {
const [scale, setScale] = useState(1);
const [offset, setOffset] = useState({ x: 0, y: 0 });
return (
setScale={setScale}
offset={offset}
setOffset={setOffset}
>
width="200px"
style={{ position: "absolute", left: "200px" }}
/>
style={{
position: "absolute",
width: "400px",
height: "400px",
left: "0px",
top: "0px",
borderColor: "red",
borderStyle: "solid",
}}
>
);
}
export default App;