Discord
Source code

use-move

Handles move behavior over any element, use to build custom sliders, color pickers, etc.
Import

Usage

use-move handles move behavior over any element:

Values { x: 20, y: 60 }
import { useMantineTheme, Text, Code } from '@mantine/core';
import { useMove } from '@mantine/hooks';
function Demo() {
const theme = useMantineTheme();
const [value, setValue] = useState({ x: 0.2, y: 0.6 });
const { ref, active } = useMove(setValue);
return (
<>
<div
ref={ref}
style={{
width: 400,
height: 120,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
left: `calc(${value.x * 100}% - 8px)`,
top: `calc(${value.y * 100}% - 8px)`,
width: 16,
height: 16,
backgroundColor: active ? theme.colors.teal[7] : theme.colors.blue[7],
}}
/>
</div>
<Text>
Values <Code>{`{ x: ${Math.round(value.x * 100)}, y: ${Math.round(value.y * 100)} }`}</Code>
</Text>
</>
);
}

API

Hook accepts callback that is called when user moves pressed mouse over given element and returns object with ref and active state:

const {
ref, // -> pass ref to target element
active, // -> is user changing something right now?
} = useMove(({ x, y }) => setValue({ x, y }));

x and y values are always between 0 and 1, you can use them to calculate value in your boundaries.

Examples

Horizontal slider

You can ignore changes for one of the axis:

Value: 20

Vertical slider

Moving slider down increases value, to reverse that set value to 1 - y in your setValue function:

Value: 20

Color picker

Definition

function useMove<T extends HTMLElement = HTMLDivElement>(
onChange: (value: { x: number; y: number }) => void
): {
ref: React.MutableRefObject<T>;
active: boolean;
};
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback