Gestures
info
Due to time constraint, we couldn't complete this page. We will complete as soon as possible.
Gestures in React UI Animate is a set of gestures that let you bind mouse and touch events to any node. With the data you receive, it becomes easy to set up complex gestures like dragging and scrolling with a few lines of code.
Available gesture hooks
Currently, the library provides the following list of gesture hooks. All these hooks share similar API pattern:
useScroll
for scroll gesture.useMouseMove
for mouse move gesture.useDrag
for drag gesture.useWheel
for mouse wheel gesture.useGesture
for multiple gestures.
Binding a gesture to a Node
Due to similar pattern of gesture hooks, it becomes quite easy to implement any gesture effortlessly. To bind a gesture to a node, the gesture hooks returns a function, which when called returns an object with event handlers. Let say we want a <div />
to be draggable.
import { useDrag } from 'react-ui-animate';
export default function () {
const bind = useDrag((state) => doSomething(state));
return (
<div
{...bind()}
style={{
width: 60,
height: 60,
backgroundColor: '#3399ff',
}}
/>
);
}
In the above example, a <div />
receives an object with event handlers when you spread ...bind()
, you're actually adding onPointerDown, onMouseDown, and other event handlers. The useDrag
hook accepts a callback function with state as a parameter. state is an object containing all attributes of the gesture. The state
is passed to your handler every time the gesture updates.
To actually implement dragging of an element, we should be using it with Animated Value.
import { useDrag, useAnimatedValue, AnimatedBlock } from 'react-ui-animate';
export default function () {
const left = useAnimatedValue(0);
const bind = useDrag(({ down, movementX }) => {
left.value = down ? movementX : 0;
});
return (
<AnimatedBlock
{...bind()}
style={{
width: 60,
height: 60,
backgroundColor: '#3399ff',
position: 'absolute',
left: left.value,
}}
/>
);
}
In the above example, left
is an animated value. The state
object has down
which represents the current state of a mouse click and movementX
which represents the movement in x-axis always starting from 0.