Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

use-radial-move

Handles radial move behavior over given element, can be used to build custom radial sliders

Import

Source

View source code

Docs

Edit this page

Package

@mantine/hooks

Usage

use-radial-move hook can be used to create custom radial sliders, for example AngleSlider component is based on this hook. It works similar to use-move hook.

Example of creating custom radial slider:

115°
import { useState } from 'react';
import { Box } from '@mantine/core';
import { useRadialMove } from '@mantine/hooks';
import classes from './Demo.module.css';

function Demo() {
  const [value, setValue] = useState(115);
  const { ref } = useRadialMove(setValue);

  return (
    <Box className={classes.root} ref={ref} style={{ '--angle': `${value}deg` }}>
      <div className={classes.value}>{value}°</div>
      <div className={classes.thumb} />
    </Box>
  );
}

Hook options

use-radial-move hook accepts 2 arguments:

  • A callback function that is called when the value changes
  • An option object described below
export interface UseRadialMoveOptions {
  /** Number by which value is incremented/decremented with mouse and touch events, `0.01` by default */
  step?: number;

  /** Called in `onMouseUp` and `onTouchEnd` events with the current value */
  onChangeEnd?: (value: number) => void;

  /** Called in `onMouseDown` and `onTouchStart` events */
  onScrubStart?: () => void;

  /** Called in `onMouseUp` and `onTouchEnd` events */
  onScrubEnd?: () => void;
}

Definition

function useRadialMove<T extends HTMLElement = HTMLDivElement>(
  onChange: (value: number) => void,
  options?: UseRadialMoveOptions
): {
  ref: React.RefObject<T>;
  active: boolean;
};

Previous

use-orientation

Next

use-reduced-motion

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogGitHub Releases

Community

Chat on DiscordFollow on XFollow on GithubGitHub discussions

Project

Mantine UIHelp CenterGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people