use-move
Handles move behavior over given element, can be used to build custom sliders
Import
Source
Docs
Package
Usage
use-move
handles move behavior over any element:
Values { x: 20, y: 60 }
API
The hook accepts a callback that is called when user moves pressed mouse over the given element
and returns an object with ref
and active state:
x
and y
values are always between 0
and 1
, you can use them to calculate value in your boundaries.
Horizontal slider
You can ignore changes for one of the axis:
Value: 20
Vertical slider
Moving the slider down increases the value, to reverse that set value to 1 - y
in your setValue
function:
Value: 20
Color picker
clampUseMovePosition
clampUseMovePosition
function can be used to clamp x
and y
values to 0-1
range.
It is useful when you want to use external events to change the value, for example changing value with keyboard arrows:
Definition
UseMovePosition
@mantine/hooks
exports UseMovePosition
type, it can be used as a type parameter for useState
: