use-move

Handles move behavior over any element, use to build custom sliders, color pickers, etc.
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

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;
};
Go back
use-mouse – @mantine/hooks
Up next
use-reduced-motion – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter