RotationChangeEvent — Kuito Documentation

Usage

React to incremental rotation.

tsx

// React to incremental rotation.
import { Box, haptics, rotate, signal, type RotationChangeEvent } from 'kuito';

const turned = signal(0);

// A tick of haptic feedback every 30 degrees, like a dial's detents.
const tick = (event: RotationChangeEvent) => {
  const before = Math.floor(turned.value / 30);

  turned.value += event.rotationChange;
  if (Math.floor(turned.value / 30) !== before) void haptics.selection();
};

<Box gestures={[rotate({ onChange: tick })]} width={120} height={120} />;

Type declaration

export interface RotationChangeEvent extends RotationEvent {
  rotationChange: number;
}

Members 8

Name	Type	Required	Description
`rotationChange`	`number`	Yes	—
`rotation`	`number`	Yes	Degrees, as the rotate prop takes them.
`anchorX`	`number`	Yes	—
`anchorY`	`number`	Yes	—
`velocity`	`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.