PanEvent
Where a pan is, how far it has moved and how fast, as it starts and ends.
Usage
Dismiss a view with a pan.
// Dismiss a view with a pan.
import { Box, motion, pan, spring, type PanEvent } from 'kuito';
function Dismissible(props: { onDismiss: () => void }) {
const drag = pan({ axis: 'y' }).release(spring());
const y = motion(0).follows(drag.y);
// Far enough, or thrown fast enough: dismiss instead of springing back.
const decide = (event: PanEvent, success: boolean) => {
if (success && (event.translationY > 160 || event.velocityY > 800)) props.onDismiss();
};
return <Box translateY={y} gestures={[pan({ axis: 'y', onEnd: decide }), drag]} height={300} />;
}Type declaration
export interface PanEvent extends PositionEvent {
translationX: number;
translationY: number;
velocityX: number;
velocityY: number;
}Members 11
| Name | Type | Required | Description |
|---|---|---|---|
translationX | number | Yes | — |
translationY | number | Yes | — |
velocityX | number | Yes | — |
velocityY | number | Yes | — |
x | number | Yes | — |
y | number | Yes | — |
absoluteX | number | Yes | — |
absoluteY | number | Yes | — |
state | number | Yes | — |
numberOfPointers | number | Yes | — |
pointerType | number | Yes | — |
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.