Interface: UseDragValueOptions
Defined in: react/src/hooks/useDragValue.ts:16
Properties
axis
axis: AxisOptions | readonly [AxisOptions, AxisOptions];
Defined in: react/src/hooks/useDragValue.ts:18
Scaling of each axis; a single value applies to both.
baseElementRef?
optional baseElementRef?: RefObject<Element | null>;
Defined in: react/src/hooks/useDragValue.ts:26
Normalize the pointer against the bounding rect of this element, so that the value is the position pointed at.
Give either this or getValue.
cursor?
optional cursor?: string;
Defined in: react/src/hooks/useDragValue.ts:69
CSS cursor to show while dragging. Applied to the element itself.
getValue?
optional getValue?: () => XY<number>;
Defined in: react/src/hooks/useDragValue.ts:34
Move the value away from where it stood when the drag started, by the distance dragged. The pointer position itself carries no meaning.
Give either this or baseElementRef.
Returns
XY<number>
onChange?
optional onChange?: (value, state) => void;
Defined in: react/src/hooks/useDragValue.ts:94
Called with the new value whenever the drag moves it. The hook holds no value of its own, so this is where it is stored.
Parameters
| Parameter | Type | Description |
|---|---|---|
value | XY<number> | - |
state | DragState | the whole drag, for anything the value leaves out — the pointer event and its modifier keys, most of all. |
Returns
void
onDragEnd?
optional onDragEnd?: (value, state) => void;
Defined in: react/src/hooks/useDragValue.ts:98
Called when the pointer is released, with the value it ends on.
Parameters
| Parameter | Type |
|---|---|
value | XY<number> |
state | DragState |
Returns
void
onDragStart?
optional onDragStart?: (value, state) => void;
Defined in: react/src/hooks/useDragValue.ts:96
Called once the drag starts, with the value it starts from.
Parameters
| Parameter | Type |
|---|---|
value | XY<number> |
state | DragState |
Returns
void
pixelRange?
optional pixelRange?: number | readonly [number, number];
Defined in: react/src/hooks/useDragValue.ts:39
Pixels of movement that span the whole range, with getValue.
Default
100
pointerLock?
optional pointerLock?: boolean;
Defined in: react/src/hooks/useDragValue.ts:78
Hide the pointer and read its movement directly, instead of following it
around the screen. Only with getValue: there is no pointer position to
normalize against a baseElementRef while the pointer is locked.
See
DragOptions.pointerLock
Default
false
sensitivity?
optional sensitivity?: (state) => number;
Defined in: react/src/hooks/useDragValue.ts:52
How much the movement counts, read on every move. 0.1 makes the same
movement cover a tenth of the range, which is what a fine-adjustment
modifier wants.
With baseElementRef the value is normally the position pointed at, so
anything but 1 turns the mapping relative and leaves the pointer and the
value apart for the rest of the drag.
Parameters
| Parameter | Type |
|---|---|
state | DragState |
Returns
number
See
- relativeMapping
- elementMapping
shouldStart?
optional shouldStart?: (event) => boolean;
Defined in: react/src/hooks/useDragValue.ts:85
Decide whether a pointerdown starts a drag at all, before the pointer is captured.
Parameters
| Parameter | Type |
|---|---|
event | PointerEvent |
Returns
boolean
See
DragOptions.shouldStart
threshold?
optional threshold?: number;
Defined in: react/src/hooks/useDragValue.ts:67
Pixels the pointer has to travel before the drag counts as one. The default is 0, so the value follows the very first move.
Default
0
updateOnPointerDown?
optional updateOnPointerDown?: boolean;
Defined in: react/src/hooks/useDragValue.ts:60
Move the value on pointerdown, before the pointer has moved at all. With
baseElementRef that makes a press jump the value to where it landed.
See
DragValueOptions.updateOnPointerDown