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 { useState } from 'react';
import { useMantineTheme, Text, Code, rem } 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 (
<>
<Group position="center">
<div
ref={ref}
style={{
width: rem(400),
height: rem(120),
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
left: `calc(${value.x * 100}% - ${rem(8)})`,
top: `calc(${value.y * 100}% - ${rem(8)})`,
width: rem(16),
height: rem(16),
backgroundColor: active ? theme.colors.teal[7] : theme.colors.blue[7],
}}
/>
</div>
</Group>
<Text align="center" mt="sm">
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: UseMovePosition) => void,
handlers?: useMoveHandlers,
dir?: 'ltr' | 'rtl'
): {
ref: MutableRefObject<T>;
active: boolean;
};