hooks/useDragValue
Interfaces
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:59
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:81
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:83
Parameters
| Parameter | Type |
|---|---|
value | XY<number> |
state | DragState |
Returns
void
onDragStart?
optional onDragStart?: (value, state) => void;
Defined in: react/src/hooks/useDragValue.ts:82
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:68
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:75
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:57
Default
0
updateOnPointerDown?
optional updateOnPointerDown?: boolean;
Defined in: react/src/hooks/useDragValue.ts:55
See
DragValueOptions.updateOnPointerDown
Functions
useDragValue()
function useDragValue<T>(options): object;
Defined in: react/src/hooks/useDragValue.ts:91
Drive a value with a pointer drag.
Type Parameters
| Type Parameter |
|---|
T extends Element |
Parameters
| Parameter | Type |
|---|---|
options | UseDragValueOptions |
Returns
object
a ref callback for the element that starts the drag, and whether a drag is in progress
dragging
dragging: boolean;
refCallback
refCallback: (node) => void;
Parameters
| Parameter | Type |
|---|---|
node | T | null |
Returns
void